reactjs 未在React Formik中选中复选框

wa7juj8i 于 2023-02-04 发布在 React

关注(0)|答案(2)|浏览(121)

我用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>
 );
}

有趣的是，当checked属性存在时，复选框不会被选中，但如果我删除checked属性，它会被选中。原因是什么？

reactjs

来源：https://stackoverflow.com/questions/66337143/checkbox-is-not-checked-in-react-formik

2条答案

按热度按时间

anauzrmj1#

你可以在formik网页上查看文档，这里有一个本地实现来尝试demo复选框，它运行正常，我使用的是最新的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;

赞(0）回复(0）举报 2023-02-04

v1uwarro2#

在我的例子中，使用value attribute作为数字，但只适用于字符串

<Field
                              className="form-check-input"
                              type="checkbox"
                              name="idsProfiles"
                              id={item.defaultText}
                              value={item.id.toString()}
                              aria-label={item.defaultText}
                            />
                            <label htmlFor={item.defaultText}>
                              {item.defaultText}
                            </label>

赞(0）回复(0）举报 2023-02-04

我来回答

reactjs 未在React Formik中选中复选框

2条答案

相关问题

热门标签

最新问答