reactjs - React Formik 中未选中复选框

Question

我使用 React Formik 库为复选框开发了一个组件。下面是我的代码

const CheckBoxGroup = (props) => {
 const { label,name,options,...rest } = props
  return ( 
  <React.Fragment>
<label htmlFor={name}> {label} </label>
<div className='form-check form-check-inline'>
    <Field  name={name} id={name} {...rest} >
        {
            ({field}) => {
               return options.map( (option) => {
                   
                    return ( <React.Fragment key={option.key}> 
                     
                        <input type="checkbox" 
                        id={option.value}  {...field} value={option.value}
                        checked={field.value.includes(option.value)}
                       />
                        <label class="form-check-label" htmlFor={option.value}>{option.key}</label>
                    </React.Fragment>)
                })
            }
           
        }
    </Field>
    <ErrorMessage name={name} component={TextError} />
</div>
</React.Fragment>
 );
}

有趣的部分是，当出现检查属性时，复选框没有chek，但是如果我删除了检查属性，则将检查。

是什么原因？

Answer 1

你可以查看 formik 网页上的文档，这里是一个本地实现来尝试演示复选框，它运行正常，我使用了最后一个 formik lib 版本。

这是来自 formik 网站的示例:formik checkboxex codesandbox demo

***我无法复制你的代码，因为你错过了 Prop 上的输入

这是我在本地运行的:

import React from 'react';
import { Field, Formik ,Form } from 'formik';
import './App.css';

function App() {


  ///FORMIK DOCS:
  ///https://formik.org/docs/examples/checkboxes

const CheckBoxGroup = (props) => {
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));

     return ( 
      <Formik
      initialValues={{
        toggle: false,
        checked: [],
      }}
      onSubmit={async (values) => {
        await sleep(500);
        alert(JSON.stringify(values, null, 2));
      }}
    >
      {({ values }) => (
        <Form>        
          <label>
            <Field type="checkbox" name="toggle" />
            {`${values.toggle}`}
          </label>       
          <div id="checkbox-group">Checked</div>
          <div role="group" aria-labelledby="checkbox-group">
            <label>
              <Field type="checkbox" name="checked" value="One" />
              One
            </label>
            <label>
              <Field type="checkbox" name="checked" value="Two" />
              Two
            </label>
            <label>
              <Field type="checkbox" name="checked" value="Three" />
              Three
            </label>
          </div>

          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
    );
   }

  return (
    <div className="App">
      {CheckBoxGroup()}
    </div>
  );
}

export default App;