javascript - 如何使用 formik react js 在 handlesubmit 函数中接收选择值？

Question

我正在使用 formik 插件在 reactjs 中开发一个表单 plugin link .当我提交表单时，我得到的是文本字段值，但下拉值是空的...

这是我的下拉选择

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

处理提交函数

export default withFormik({
  enableReinitialize: true,
  mapPropsToValues({ category }) {
    return {      
      category: category || ''
    }
  },
    handleSubmit(values, { setStatus, setErrors }){
      console.log("data is this: "); 
      console.log(values); //here i am getting all form fields values except select value returning empty value
      console.log("category: "+values.category);// here i always get empty value but not getting selected value

      }

我在句柄提交函数中获取所有文本字段值，但我无法获取下拉选择值....请告诉我如何在句柄提交函数中获取下拉选择值？

Answer 1

我昨天也遇到了这个问题。我的问题是提交包含 ant design 下拉列表的表单。经过几个小时后，我终于让它工作了:

• 重温 Formik Docs
• 观看 Andrew Mead 的视频 Better React Form with Formik再次。
• 也在查看 Jared Palmer 的 Working with 3rd-party inputs #1: react-select

文档说你需要分别设置onChange, onBlur 事件到setFieldValue, setFieldTouched props 就像3rd -方输入示例:

<MySelect
    value={values.topics}
    onChange={setFieldValue}
    onBlur={setFieldTouched}
    error={errors.topics}
    touched={touched.topics}
/>

所以对于我的问题，我需要稍微改变一下:

<Select
  {...field}
  onChange={(value) => setFieldValue('fruitName', value)}
  onBlur={()=> setFieldTouched('fruitName', true)}
  value={values.fruitName}
  ...
>
...
</Select>

希望这会有所帮助。

这是我的 CodeSandbox