Formik未通过handleChange props处理Checkbox onChange事件

Question

我正在使用 React 和 Formik 库构建简单的表单。 我在 form 标签中添加了一个复选框，该标签被 formik 库的 withFormik 包装器包含。

我尝试更改从

开始的内容。

<input
  type="checkbox"
  name="flag"
  checked={values.flag}
  onChange={handleChange}
  onBlur={handleBlur}
/>

到

<input
  type="checkbox"
  name="flag"
  value={values.flag}
  onChange={handleChange}
  onBlur={handleBlur}
/>

但是没有一个有效的。

组件如下：

import { withFormik } from 'formik';
...

const Form = props => (
  <form>
    <input
      type="checkbox"
      name="flag"
      checked={props.values.flag}
      onChange={props.handleChange}
      onBlur={props.handleBlur}
    />
    <input
      type="text"
      name="name"
      checked={props.values.name}
      onChange={props.handleChange}
      onBlur={props.handleBlur}
    />
  </form>
);

const WrappedForm = withFormik({
  displayName: 'BasicForm',
})(Form);

export default WrappedForm;

当单击复选框时，它应该更改props.values。但是它根本不会更改props数据。

顺便说一句，当在文本输入框中输入时，它会更改props数据。这只发生在复选框中。

- Derek Jin

---

FYI：它可以很好地与其他标签一起使用，比如文本输入框。 - Derek Jin

似乎工作正常？工作版本：https://codesandbox.io/embed/dark-mountain-vy3qj - Jap Mul

我使用了自定义的复选框组件，而不是原始的input元素。 问题就出在那里。 @jagsler感谢您的时间。 - Derek Jin

@JonathanBogdanovicz，你能否发一个问题出现的例子，因为你说你不是使用原始类型而是使用自定义类型，在这种情况下，请发表自定义代码，也许问题就在那里。 - Rikin

@LangReactDev 你解决了这个问题吗？如果是的话，能否分享一下你的解决方案？我在自定义复选框方面也遇到了同样的问题。 - Gaurav Jain

Answer 1

使用Formik props中的setFieldValue函数，您可以将检查框的值设置为true或false。

<CheckBox
checked={values.check}
onPress={() => setFieldValue('check', !values.check)}
/>

我的回答与React Native复选框有关。

这篇文章非常有帮助。https://heartbeat.fritz.ai/handling-different-field-types-in-react-native-forms-with-formik-and-yup-fa9ea89d867e

- Tamunoibi Aprekuma

Answer 2

我正在使用React Material UI库，以下是我如何管理复选框：

import { FormControlLabel, Checkbox} from "@material-ui/core";
import { Formik, Form, Field } from "formik";

         <Formik
            initialValues={{
              check: false
            }}
           onSubmit={(values, { setSubmitting }) => {
            setTimeout(() => {
              alert(JSON.stringify(values, null, 2));
              setSubmitting(false);
            }, 400);
          }}
        >
          {({ values, setFieldValue }) => (
            <Form className="gt-form">
              <FormControlLabel
                checked={values.check}
                onChange={() => setFieldValue("check", !values.check)}
                control={<Checkbox />}
                label="save this for later"
              />
            </Form>
          )}
        </Formik>

- Abdelghafour Ennahid