React中使用Formik时如何在handleSubmit函数中获取下拉框值？

嘿，我一眼就瞅出问题所在了——你在Formik的<Field>组件里手动绑定了value={this.state.value}和自定义的onChange={this.handleChange}，这直接覆盖了Formik自带的表单状态管理逻辑！

Formik的<Field>组件本身就是用来帮你自动同步表单状态的，它会根据name属性把下拉框和Formik内部的values绑定起来，自带的onChange会自动把选中的值同步到Formik的状态里。你自己加的那两个属性相当于把下拉框的状态和Formik的状态割裂了，选中的值只存在你组件自己的state里，根本没传到Formik的values中，所以提交时自然拿不到。

修正后的下拉框代码 #

直接去掉手动绑定的value和onChange就行：

<div className="form-group">
  <Field component="select" id="category" name="category" className={"form-control"}>
    <option value="lokaler">Lokaler</option>
    <option value="jobb">Jobb</option>
    <option value="saker-ting">Saker & ting</option>
    <option value="evenemang">Evenemang</option>
  </Field>
</div>

如果你需要自定义逻辑（可选） #

要是之后你需要给下拉框加自定义的onChange逻辑，可以用Formik的render prop写法，这样既保留Formik的状态管理，又能扩展功能：

<Field name="category">
  {({ field }) => (
    <select 
      {...field} 
      className="form-control"
      onChange={(e) => {
        // 这里可以加你的自定义逻辑
        field.onChange(e); // 别忘了调用Formik的onChange同步状态
      }}
    >
      <option value="lokaler">Lokaler</option>
      <option value="jobb">Jobb</option>
      <option value="saker-ting">Saker & ting</option>
      <option value="evenemang">Evenemang</option>
    </select>
  )}
</Field>

你的mapPropsToValues部分已经处理了默认值，这部分是没问题的。改完之后再提交表单，就能正常拿到values.category的选中值啦！

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