Question

我正在将Formik与React结合使用来处理我的Web应用程序表单。

当我尝试提交带有字段的任何表单时，它不包含该字段的正确选择值，而是默认值。

在下面的情况下，该元素对应于输入“ clientId”，当我选择一个客户然后提交表单时，Formik始终假定clientId为空字符串（默认值）。

我尝试用文档中的以下代码替换动态选择框

<Field name="color" component="select" placeholder="Favorite Color">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</Field>

但是，它没有用。

我的代码有问题吗？这是我使用的版本中的错误吗？

我试图在github上找到与此问题有关的任何问题，但找不到任何东西。

这是我的表格表格：

<Formik
            onSubmit={this.handleSubmit}
            initialValues={{clientId: '', invoice_number: '', date: '', products: []}}
            render={({
                         values,
                         errors,
                         status,
                         touched,
                         handleBlur,
                         handleChange,
                         handleSubmit,
                         isSubmitting,
                     }) => (
                <form onSubmit={handleSubmit}>

                    <SelectClientInput
                        name={"clientId"}
                    />


                    <br/>

                    <input
                        placeholder="Número da fatura"
                        type="text"
                        name="invoice_number"
                        className={"form-control"}
                        onChange={handleChange}
                        onBlur={handleBlur}
                        value={values.invoice_number}
                    />

                    <br/>

                    <input
                        placeholder="Data"
                        type="date"
                        name="date"
                        className={"form-control"}
                        onChange={handleChange}
                        onBlur={handleBlur}
                        value={values.date}
                    />



                    <br/>


                    <button type="submit" className={"btn btn-success"} disabled={isSubmitting}>
                        Criar produto
                    </button>
                </form>
            )}
        />)

和此SelectClientInput组件

class SelectClientInput extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            clients: [],
        }
    }

    componentWillMount = () => {
        this.searchClients();
    }

    searchClients = (inputValue = "") => {
        var self = this;
        //Search tax payers
        axios.get('/api/clients')
            .then(function (response) {
                var clients = response.data.clients;
                self.setState({clients: clients});
            })
            .catch(function (error) {
                console.log(error);
            });
    }

    render = () => {
        return (
            <Field
                component="select"
                name={this.props.name}
                className={'form-control'}
            >
                {(this.state.clients && this.state.clients.length > 0) ?
                    this.state.clients.map((client) => {
                        return (<option key={client.id} value={client.id}>{client.name}</option>);
                    }) : (<option key={1}>Nenhum cliente encontrado</option>)
                }
            </Field>
        );
    }
};

我正在使用react-dom 16.6和formik 1.3.1

注意：每个字段都以正确的值发送，但字段中的值除外。

谢谢！

Answer 1

您在控件/字段与formik的var connection = snowflake.createConnection({ account: 'abc', username: 'user1', password: 'pass1', region: 'us-east-1' });之间没有“连接”。

将其状态/值保存在values中，就像使用values进行输入一样。

handleChange必须放置在<Field />组件内，而不是简单的html <Form />。

<form />是一个组件，它需要一个单独的变更处理程序（使用<SelectClientInput />更新Formik values）作为属性传入。实际值（setValues）也应作为prop传递。这是标准的ra lifting state技术。

Formik选择框不更新表单提交字段

1 个答案: