我正在使用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 回答
你不要't have an '连接' between controls/fields and formik' s
values
.它们的状态/值需要保存在
values
中,因为它是使用handleChange
输入完成的 .<Field />
需要放在<Form />
组件内,而不是简单的html<form />
.<SelectClientInput />
是一个组件,它需要一个单独的更改处理程序(使用setValues
更新Formikvalues
)作为prop传入 . 实际值(values.clientId
)也应作为道具传递 . 这是标准的raact lifting state技术 .