我正在尝试使用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 >
)
...
呈现页面时,将根据“启用”的值正确呈现和打勾/不打勾复选框。 单击复选框时,不起作用的行为是什么。刻度未添加/删除,值也未更改。
我按照以下两个假设研究了这个问题:
您知道问题可能在哪里吗?
答案 0 :(得分:0)
事实证明,我在许多示例中发现的语法对于执行所需的操作而言不必要地复杂。
另一个问题是我定义“名称”值的“路径”的方式。
似乎我已经将props.settings
分配给initialValues
了,所以我只需要指出相对路径即可。
使用以下简单语法,即可立即使用。
<Field name={`alerts[${alert}][${state}].enabled`} type="checkbox" />