reactjs - Formik 的 handleChange Prop 不处理复选框 onChange 事件

Question

我正在使用 React 构建简单的表单和 Formik图书馆。
我在 form 中添加了复选框由 withFormik 包裹的标签formik 的 wrapper 图书馆。

我试图从

<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。
但它根本不会改变 Prop 数据。

顺便说一句，它在文本输入框中键入时会更改 Prop 数据。
这只发生在 checkbox .

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