React中使用Formik时onChange失效及提交值不匹配问题求助

我看到你遇到的问题了——当手动设置value属性时输入框无法输入，不设置的话提交又获取不到值，这确实是Formik使用时容易踩的小坑，我来帮你排查和解决：

可能的原因及对应解决方案 #

1. Formik版本兼容问题（最常见）

如果你使用的是Formik v1版本，handleChange的用法和v2不同：v1中它需要接收字段名作为参数，而不是直接作为onChange的回调函数。你的代码是按照v2的写法写的，所以会导致输入时无法更新表单状态，输入框内容不变化。

解决办法：

• 如果你想继续用v1，修改onChange的写法：

  <input 
    type="text" 
    placeholder="First Name" 
    name="fname" 
    onChange={handleChange('fname')} 
    value={values.fname} 
  />
  <input 
    type="text" 
    placeholder="Last Name" 
    name="lname" 
    onChange={handleChange('lname')} 
    value={values.lname} 
  />
  

• 更推荐的是升级到Formik v2+，这样你的原有代码就可以正常工作，v2的API更简洁直观。

2. 使用Formik的<Field>组件替代原生input（更省心的方案）

不管使用哪个版本，Formik提供的<Field>组件都会自动处理value和onChange，无需手动设置，能避免这类手动绑定的错误。修改你的代码如下：

export default class DashboardPage extends React.Component {
  render() {
    return (
      <Formik
        initialValues={{ fname: "", lname: "" }}
        onSubmit={(values) => {
          alert(values.fname);
        }}
        render={({ handleSubmit }) => (
          <form onSubmit={handleSubmit}>
            <Field type="text" placeholder="First Name" name="fname" />
            <Field type="text" placeholder="Last Name" name="lname" />
            <button type="submit">ADD</button>
          </form>
        )}
      />
    );
  }
}

这样既不用手动处理value和onChange，提交时也能正确获取到输入的内容。

3. 检查name属性与initialValues的键是否完全匹配

虽然你的代码里看起来是匹配的，但还是要确认：输入框的name属性必须和initialValues中的键完全一致（大小写、拼写都不能错），否则Formik无法正确映射表单字段和状态。

验证方案 #

你可以先尝试用<Field>组件的方案，这是最不容易出错的；如果想继续用原生input，就检查Formik版本并调整handleChange的用法。

内容的提问来源于stack exchange，提问作者Rohan Agarwal