如何保留 Formik 中每个切换字段的值?
How to preserve values of each toggle field in Formik?
我正在使用 Formik 创建一个具有下拉和提交按钮的表单。单击下拉列表中的任何项目后,我会呈现一个切换选项。我面临的问题是,如果我有两个开关,第一个是关闭的,第二个是打开的。现在如果我删除第一个,第二个的值也会更改为第一个的值。我如何解决它。任何帮助表示赞赏。
这是我的代码 link -
https://codesandbox.io/s/kw3w0xlqjv
问题出在 key 属性上。正确解-
import React from "react";
import { render } from "react-dom";
import ReactDOM from "react-dom";
import { Dropdown, DropdownItem } from "carbon-components-react";
import { Formik, Field, Form, FieldArray } from "formik";
const initialValues = {
attributes: []
};
const App = () => (
<div>
<Formik
initialValues={initialValues}
onSubmit={values => console.log(values)}
render={({ values }) => {
return (
<Form>
<FieldArray
name="attributes"
render={({ remove, push }) => (
<div>
{values.attributes.length > 0 &&
values.attributes.map((eachAttribute, index) => (
<div className="row" key={eachAttribute.attributeName}>
<div className="col">
<label>{eachAttribute.attributeName}</label>
<Field
name={`attributes.${index}.values.in.[=10=]`}
type="checkbox"
id={`boolenField.${index}`}
className="bx--toggle"
/>
<label
className="bx--toggle__label"
for={`boolenField.${index}`}
>
<span className="bx--toggle__text--left">Off</span>
<span className="bx--toggle__appearance" />
<span className="bx--toggle__text--right">On</span>
</label>
{/*<Field
name={`attributes.${index}.values.in.[=10=]`}
placeholder="attribute value"
type="text"
/>*/}
</div>
<div className="col">
<button
type="button"
className="secondary"
onClick={() => remove(index)}
>
X
</button>
</div>
</div>
))}
<Dropdown
className="some-class"
ariaLabel="dropdown menu label"
onChange={e =>
push({ attributeName: e.value, values: { in: [] } })
}
defaultText="Pick attribute"
>
<DropdownItem itemText="Option 1" value="option1" />
<DropdownItem itemText="Option 2" value="option2" />
<DropdownItem itemText="Option 3" value="option3" />
<DropdownItem itemText="Option 4" value="option4" />
<DropdownItem itemText="Option 5" value="option5" />
</Dropdown>
{/*<button
type="button"
className="secondary"
onClick={() =>
push({ attributeName: "", values: { in: [] } })
}
>
Add attribute
</button>*/}
</div>
)}
/>
<button type="submit">Submit</button>
</Form>
);
}}
/>
</div>
);
render(<App />, document.getElementById("root"));
谢谢里卡多·布兰比拉。
我正在使用 Formik 创建一个具有下拉和提交按钮的表单。单击下拉列表中的任何项目后,我会呈现一个切换选项。我面临的问题是,如果我有两个开关,第一个是关闭的,第二个是打开的。现在如果我删除第一个,第二个的值也会更改为第一个的值。我如何解决它。任何帮助表示赞赏。
这是我的代码 link -
https://codesandbox.io/s/kw3w0xlqjv
问题出在 key 属性上。正确解-
import React from "react";
import { render } from "react-dom";
import ReactDOM from "react-dom";
import { Dropdown, DropdownItem } from "carbon-components-react";
import { Formik, Field, Form, FieldArray } from "formik";
const initialValues = {
attributes: []
};
const App = () => (
<div>
<Formik
initialValues={initialValues}
onSubmit={values => console.log(values)}
render={({ values }) => {
return (
<Form>
<FieldArray
name="attributes"
render={({ remove, push }) => (
<div>
{values.attributes.length > 0 &&
values.attributes.map((eachAttribute, index) => (
<div className="row" key={eachAttribute.attributeName}>
<div className="col">
<label>{eachAttribute.attributeName}</label>
<Field
name={`attributes.${index}.values.in.[=10=]`}
type="checkbox"
id={`boolenField.${index}`}
className="bx--toggle"
/>
<label
className="bx--toggle__label"
for={`boolenField.${index}`}
>
<span className="bx--toggle__text--left">Off</span>
<span className="bx--toggle__appearance" />
<span className="bx--toggle__text--right">On</span>
</label>
{/*<Field
name={`attributes.${index}.values.in.[=10=]`}
placeholder="attribute value"
type="text"
/>*/}
</div>
<div className="col">
<button
type="button"
className="secondary"
onClick={() => remove(index)}
>
X
</button>
</div>
</div>
))}
<Dropdown
className="some-class"
ariaLabel="dropdown menu label"
onChange={e =>
push({ attributeName: e.value, values: { in: [] } })
}
defaultText="Pick attribute"
>
<DropdownItem itemText="Option 1" value="option1" />
<DropdownItem itemText="Option 2" value="option2" />
<DropdownItem itemText="Option 3" value="option3" />
<DropdownItem itemText="Option 4" value="option4" />
<DropdownItem itemText="Option 5" value="option5" />
</Dropdown>
{/*<button
type="button"
className="secondary"
onClick={() =>
push({ attributeName: "", values: { in: [] } })
}
>
Add attribute
</button>*/}
</div>
)}
/>
<button type="submit">Submit</button>
</Form>
);
}}
/>
</div>
);
render(<App />, document.getElementById("root"));
谢谢里卡多·布兰比拉。