Javascript React Formik checkbox group不会变为一个选中或未选中元素的数组

我正在使用Formik在网站上创建表单。在这个表单中，我有一组标记，我希望可以使用单个复选框进行检查，但要将它们保存在一个数组中

tags

。Formik声称可以通过在Field元素上使用相同的

name

属性来实现这一点，但我无法让它工作

我用这个作为参考

这是我的密码：

import React from "react";
import ReactDOM from "react-dom";
import { Formik, Form, Field } from "formik";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <ProjectsForm />
    </div>
  );
}

const ProjectsForm = props => (
  <Formik
    initialValues={{
      search: "",
      tags: []
    }}
    onSubmit={values => {
      console.log(values);
    }}
    validate={values => {
      console.log(values);
    }}
    validateOnChange={true}
  >
    {({ isSubmitting, getFieldProps, handleChange, handleBlur, values }) => (
      <Form>
        <Field type="text" name="search" />
        <label>
          <Field type="checkbox" name="tags" value="one" />
          One
        </label>
        <label>
          <Field type="checkbox" name="tags" value="two" />
          Two
        </label>
        <label>
          <Field type="checkbox" name="tags" value="three" />
          Three
        </label>
      </Form>
    )}
  </Formik>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

从“React”导入React；
从“react dom”导入react dom；
从“Formik”导入{Formik，Form，Field}；
导入“/styles.css”；
函数App（）{
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}
const ProjectsForm=props=>(
{
console.log（值）；
}}
验证={values=>{
console.log（值）；
}}
validateOnChange={true}
>
{（{isSubmitting，getFieldProps，handleChange，handleBlur，values}）=>(
一个
两个
三
)}
);
const rootElement=document.getElementById（“根”）；
ReactDOM.render(

我希望收到
console.log（values）
以显示以下内容：

对象{search:，标记：['one'，'three']}

或

对象{search:，标记：['one'：true，'two'：false，'three'：true]}

希望我缺少一件简单的事情来添加Formik复选框组功能，因为它声称是可能的。
使用
FieldArray
组件很容易完成

将值放入数组中，如下所示：

<FieldArray
    name="tags"
    render={arrayHelpers => (
        <div>
            {tagCollection.map(tag => (
                <label key={tag.value}>
                    <input
                        name="tags"
                        type="checkbox"
                        value={tag}
                        checked={values.tags.includes(tag.value)}
                        onChange={e => {
                          if (e.target.checked) {
                            arrayHelpers.push(tag.value);
                          } else {
                            const idx = values.tags.indexOf(tag.value);
                            arrayHelpers.remove(idx);
                          }
                        }}
                    />
                    <span>{tag.label}</span>
                </label>
            ))}
        </div>
    )}
/>

const tagCollection=[
{值：“一”，标签：“一”}，
{值：“二”，标签：“二”}，
{值：“三”，标签：“三”}
];

然后像这样使用
字段数组
：

<FieldArray
    name="tags"
    render={arrayHelpers => (
        <div>
            {tagCollection.map(tag => (
                <label key={tag.value}>
                    <input
                        name="tags"
                        type="checkbox"
                        value={tag}
                        checked={values.tags.includes(tag.value)}
                        onChange={e => {
                          if (e.target.checked) {
                            arrayHelpers.push(tag.value);
                          } else {
                            const idx = values.tags.indexOf(tag.value);
                            arrayHelpers.remove(idx);
                          }
                        }}
                    />
                    <span>{tag.label}</span>
                </label>
            ))}
        </div>
    )}
/>

(
{tagCollection.map（标记=>(
{
如果（例如，选中目标）{
arrayHelpers.push（tag.value）；
}否则{
const idx=values.tags.indexOf（tag.value）；
阵列帮助器。移除（idx）；
}
}}
/>
{tag.label}
))}
)}
/>



更新：

您也可以通过编写自己的组件来实现这一点

constmycheckbox=（{field，form，label，…rest}）=>{
常量{name，value:formikValue}=field；
const{setFieldValue}=form；
const handleChange=事件=>{
常量值=formikValue | |[]；
常量索引=values.indexOf（rest.value）；
如果（索引==-1）{
value.push（rest.value）；
}否则{
拼接值（索引1）；
}
setFieldValue（名称、值）；
};
返回(
{label}
);
};
//然后像这样使用它：
使用不含任何Formik特定组件的Formik 2：

import React from "react";
import { useFormik } from "formik";

export default function App() {
  return <ProjectsForm></ProjectsForm>;
}

const tags = ["one", "two", "three"];

const ProjectsForm = () => {
  const formik = useFormik({
    enableReinitialize: true,
    initialValues: {
      tags: []
    },
    onSubmit: (values) => {
      console.log(values);
    }
  });

  const handleChange = (e) => {
    const { checked, name } = e.target;
    if (checked) {
      formik.setFieldValue("tags", [...formik.values.tags, name]);
    } else {
      formik.setFieldValue(
        "tags",
        formik.values.tags.filter((v) => v !== name)
      );
    }
  };

  return (
    <form onSubmit={formik.handleSubmit}>
      {tags.map((tag) => (
        <div key={tag}>
          <input
            id={tag}
            type="checkbox"
            name={tag}
            checked={formik.values.tags.includes(tag)}
            onChange={handleChange}
          />
          <label htmlFor={tag}>{tag}</label>
        </div>
      ))}
      <button type="submit">Submit</button>
    </form>
  );
};

从“React”导入React；
从“formik”导入{useFormik}；
导出默认函数App（）{
返回；
}
常量标记=[“一”、“二”、“三”]；
const ProjectsForm=（）=>{
常数formik=useFormik({
enableReinitialize:true，
初始值：{
标签：[]
},
onSubmit：（值）=>{
console.log（值）；
}
});
常数handleChange=（e）=>{
const{checked，name}=e.target；
如果（选中）{
formik.setFieldValue（“tags”，[…formik.values.tags，name]）；
}否则{
formik.setFieldValue(
“标签”，
formik.values.tags.filter（（v）=>v！==name）
);
}
};
返回(
{tags.map（（tag）=>(
{tag}
))}
提交
);
};

我首先创建了一个简单的标记数组

然后我使用
useFormik
hook为一组复选框绑定表单。复选框是否被选中取决于它是否在标记数组中。
因此：
formik.values.tags.includes（tag）

我创建了一个自定义更改处理函数，根据复选框是否选中，从Formik值中设置或删除标记

是的，我也发现了这一点，但我只是想知道是否有更简单的方法，正如Formik在GitHub的示例中所说的那样。好的，我还添加了一种不同的方法。可能更好/更简单。谢谢，这对我来说非常有效！以前我尝试像Formik的示例一样实现这一点，但对我来说从未奏效。感谢您解决了一个问题ge头痛！