Reactjs Formik复选框不更改值

我试图用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 >
)
...

。。。
返回(
{
console.log（'values'，values）
}}
>
{props=>{
返回(
{
Object.keys（props.values.alert）.map（（alert）=>{
Object.key（props.values.alerts[alert]）.map（（state）=>
{（{field，form，meta}）=>
}
)
}
)
}
)
}}
)
...

呈现页面时，根据“启用”的值正确呈现和勾选/不勾选复选框。 不起作用的是单击复选框时的行为。不会添加/删除勾号，也不会更改值

我对这个问题的研究遵循了两个假设：

• Formik复选框不需要onChange/onClick/etc函数来 处理这个问题（事实证明，在 相同的形式）
• Formik复选框需要一个函数。我尝试将其添加到标记和render（）函数中。但是没有成功

---

知道问题在哪里吗？

事实证明，我使用的语法（我在许多示例中发现）对于我需要做的事情来说是不必要的复杂

另一个问题是我定义“name”值的“path”的方式。 似乎我已经将

props.settings

分配给

initialValues

，那么我只需要指示相对路径

使用下面的简单语法，它立即起作用

<Field name={`alerts[${alert}][${state}].enabled`} type="checkbox" />