如何在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。