![](/img/trans.png)
[英]«A component is changing an uncontrolled input of type checkbox to be controlled.» warning for checkboxes with Formik
[英]Formik checkboxes not changing values
我正在尝试使用 Formik 创建一个表单,它本质上是一系列复选框。 这是我正在做的简化版本,
我有一些看起来像这样的道具:
"settings" : {
"email_addresses":
[
"a@b.com",
"c@b.com",
],
"alerts":
{
"SYSTEM": {
"UP": {
"enabled": true,
"states": ["UP"]
},
"DOWN": {
"enabled": false,
"states": ["DOWN"]
}
}
}
}
这是表格
...
return (
<Formik
initialValues={this.props.settings}
onSubmit={(values) => {
console.log('values', values)
}}
>
{props => {
return (
<Form>
{
Object.keys(props.values.alerts).map((alert) => {
Object.keys(props.values.alerts[alert]).map((state) =>
<Field name={props.values.alerts[alert][state].enabled}>
{({ field, form, meta }) =>
<input
type="checkbox"
id={props.values.alerts[alert][state]}
checked={props.values.alerts[alert][state].enabled}
/>
}</Field>
)
}
)
}
</Form >
)
}}
</Formik >
)
...
呈现页面时,复选框会根据“启用”的值正确呈现和勾选/未勾选。 单击复选框时的行为不起作用。 不添加/删除刻度并且不更改值。
我根据两个假设解决了这个问题:
知道问题可能出在哪里吗?
事实证明,我在许多示例中发现的语法对于我需要做的事情来说是不必要的复杂。
另一个问题是我定义“名称”值的“路径”的方式。 似乎因为我已将props.settings
分配给initialValues
,所以我只需要指出相对路径。
使用以下简单的语法,它立即生效。
<Field name={`alerts[${alert}][${state}].enabled`} type="checkbox" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.