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 >
)
...
呈现页面时,会正确呈现复选框并根据 "enabled" 的值勾选 ticked/not。
not 起作用的是单击复选框时的行为。 Tick 不是 added/removed 并且值未更改。
我根据两个假设来研究这个问题:
- Formik 复选框不需要 onChange/onClick/etc。作用于
处理这个(因为它被证明是几个 "text" 字段的情况
相同的形式)。
- Formik 复选框需要一个功能。我试图在标签和 render() 函数中添加。但没有成功。
知道问题出在哪里吗?
事实证明,我在许多示例中发现的语法对于我需要做的事情来说过于复杂。
另一个问题是我将 'path' 定义为 'name' 的值的方式。
好像我已经把props.settings
赋给了initialValues
那么我只需要指明相对路径就可以了
使用以下简单语法,它立即起作用。
<Field name={`alerts[${alert}][${state}].enabled`} type="checkbox" />
我正在尝试使用 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 >
)
...
呈现页面时,会正确呈现复选框并根据 "enabled" 的值勾选 ticked/not。 not 起作用的是单击复选框时的行为。 Tick 不是 added/removed 并且值未更改。
我根据两个假设来研究这个问题:
- Formik 复选框不需要 onChange/onClick/etc。作用于 处理这个(因为它被证明是几个 "text" 字段的情况 相同的形式)。
- Formik 复选框需要一个功能。我试图在标签和 render() 函数中添加。但没有成功。
知道问题出在哪里吗?
事实证明,我在许多示例中发现的语法对于我需要做的事情来说过于复杂。
另一个问题是我将 'path' 定义为 'name' 的值的方式。
好像我已经把props.settings
赋给了initialValues
那么我只需要指明相对路径就可以了
使用以下简单语法,它立即起作用。
<Field name={`alerts[${alert}][${state}].enabled`} type="checkbox" />