如何在Formik中保留每个切换字段的值？

Question

我正在使用Formik创建具有下拉菜单和提交按钮的表单。 单击下拉菜单中的任何项目后，我将呈现一个切换选项。 我面临的问题是，如果我有两个切换开关，并且第一个切换为OFF，第二个切换为ON。 现在，如果我删除第一个，则第二个的值也将更改为第一个。 我如何解决它。 任何帮助表示赞赏。 这是我的代码的链接-
https://codesandbox.io/s/kw3w0xlqjv

Answer 1

问题是关键属性。 正确的解决方案-

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.${0}`}
                            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.${0}`}
                            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"));

谢谢Ricardo Brambila。