使用React与Formik构建表单时复选框onChange事件不生效问题

嘿，我一眼就揪出几个导致你复选框状态没反应的问题，咱们一步步来修复：

1. 先纠正文本输入框的错误写法 #

你给文本输入框用了checked属性，这完全不对！文本输入框应该用value绑定Formik的values，checked是给复选框、单选按钮这类控件用的。这个小错误可能会干扰Formik的状态管理，先改过来：

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

2. 必须给Formik设置initialValues #

你的withFormik配置里漏掉了initialValues，这是核心问题！Formik需要初始值来初始化表单状态，如果没定义flag的初始值，props.values里根本就没有这个字段，点击复选框自然不会有任何变化。

3. 复选框的正确写法 #

复选框用checked绑定是对的，但前提是initialValues里要有对应的初始值。Formik的handleChange会自动处理复选框的状态，只要你正确设置了name和checked属性。

完整修复后的代码： #

import { withFormik } from 'formik';

const Form = props => (
  <form>
    {/* 复选框的正确写法 */}
    <input 
      type="checkbox" 
      name="flag" 
      checked={props.values.flag} 
      onChange={props.handleChange} 
      onBlur={props.handleBlur} 
    />
    {/* 文本框改用value绑定 */}
    <input 
      type="text" 
      name="name" 
      value={props.values.name} 
      onChange={props.handleChange} 
      onBlur={props.handleBlur} 
    />
  </form>
);

const WrappedForm = withFormik({
  displayName: 'BasicForm',
  // 必须添加initialValues初始化表单状态
  initialValues: {
    flag: false, // 复选框初始值设为未选中
    name: ''     // 文本框初始值设为空字符串
  },
})(Form);

export default WrappedForm;

为什么这样能解决问题？ #

• initialValues是Formik管理表单状态的基础，它会告诉Formik要跟踪哪些字段，以及它们的初始状态。
• 文本输入框用value绑定，符合HTML表单控件的规范，Formik能正确捕获输入变化。
• 复选框用checked绑定，Formik的handleChange内部会识别出这是复选框控件，自动将values.flag更新为复选框的选中状态（true/false）。

内容的提问来源于stack exchange，提问作者Derek Jin