Question

我正在使用React和Formik库构建简单的Form。我在form库的withFormik包装器包裹的formik标记内添加了复选框。

我试图从

进行更改

<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。但它根本不会更改道具数据。

顺便说一句，它会在文本输入框中键入内容时更改道具数据。只有checkbox会发生这种情况。

Answer 1

使用Formik道具中的setFieldValue，可以将检查的值设置为true或false。

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

我的答案与“本机”复选框有关。

本文对enter code here很有帮助。 https://heartbeat.fritz.ai/handling-different-field-types-in-react-native-forms-with-formik-and-yup-fa9ea89d867e

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>

复选框onChange事件不是由Formik的handleChange道具处理的

2 个答案: