React使用Formik时无法获取select下拉框选中值如何解决

• select标签重复声明了name属性，你同时写了name="Select country"和name='countrySelector'，浏览器只会识别第一个name值，导致Formik无法匹配到initialValues中定义的countrySelector字段
• 原生select没有和Formik的状态做双向绑定，无法自动同步选中值到Formik的表单数据中

方案1：使用Formik内置Field组件（推荐） #

Formik的Field组件会自动完成value、onChange、onBlur的绑定，无需手动处理，直接替换原有的select代码即可：

<Field 
  as="select" 
  name="countrySelector" 
  className="browser-default custom-select"
>
  <option value="">Select Country</option>
  <option value="DW">DE</option>
  <option value="US">US</option>
</Field>

注意：默认的Select Country选项需要添加value=""，才能和initialValues中countrySelector的初始空值匹配。

方案2：手动绑定Formik状态 #

如果你需要使用原生select标签，可以手动绑定Formik的状态和事件：

1. 首先从Formik导入useFormikContext钩子，获取表单实例：

import { useFormikContext } from 'formik';

// 在表单组件内部调用钩子
const { values, handleChange } = useFormikContext();

2. 修改select标签的代码，完成绑定：

<select 
  name="countrySelector" 
  className="browser-default custom-select"
  value={values.countrySelector}
  onChange={handleChange}
>
  <option value="">Select Country</option>
  <option value="DW">DE</option>
  <option value="US">US</option>
</select>

修复完成后，提交表单时即可在Formik的表单数据中正常获取countrySelector的选中值。

内容的提问来源于stack exchange，提问作者Lutaaya Huzaifah Idris