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 >
)
...
呈现页面时,复选框会根据“启用”的值正确呈现和勾选/未勾选。单击复选框时的行为不起作用。不添加/删除刻度并且不更改值。
我根据两个假设解决了这个问题:
- Formik 复选框不需要 onChange/onClick/等。处理此问题的函数(事实证明,同一表单中的几个“文本”字段就是这种情况)。
- Formik 复选框需要一个功能。我试图在标签和 render() 函数中添加。但没有成功。
知道问题可能出在哪里吗?
解决方案
事实证明,我在许多示例中发现的语法对于我需要做的事情来说是不必要的复杂。
另一个问题是我定义“名称”值的“路径”的方式。似乎正如我所分配props.settings
的initialValues
那样,我只需要指出相对路径。
使用以下简单的语法,它立即生效。
<Field name={`alerts[${alert}][${state}].enabled`} type="checkbox" />
推荐阅读
- laravel - 如何在 Laravel 5 中允许和拒绝 .htacces 文件?
- coq - Coq:有什么方法可以避免对 sort Set 进行案例分析?
- android - 抱怨在android运行时找不到.so(sharedlibraries)文件
- numpy - 反射/镜像填充如何工作?在numpy还是一般?
- spring-boot - application.properties 中 spring.data.elasticsearch.properties 的可能值
- java - 使用 Java API 绕过垃圾箱从 HDFS 中删除文件
- jquery - 可以在与当前不同的数组中找到先前的数字吗?
- java - 如何从 Mathpix API 字符串响应中获取方程
- javascript - JavaScript:停止执行直到延迟结束
- windows - 编写一个批处理(.bat)文件,可以一个一个地执行多个命令