首页 文章

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

提问于
浏览
0

我正在使用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表单:

<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"}
                    />


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

注意:除了字段外,每个字段都以正确的值发送 .

谢谢!

1 回答

  • 0

    你不要't have an '连接' between controls/fields and formik' s values .

    它们的状态/值需要保存在 values 中,因为它是使用 handleChange 输入完成的 .

    <Field /> 需要放在 <Form /> 组件内,而不是简单的html <form /> .

    <SelectClientInput /> 是一个组件,它需要一个单独的更改处理程序(使用 setValues 更新Formik values )作为prop传入 . 实际值( values.clientId )也应作为道具传递 . 这是标准的raact lifting state技术 .

相关问题