React Formik表单中select下拉框如何设置动态默认值

Formik会自动根据表单元素的name属性绑定状态，有两种常用的实现方式：

• 方式一（推荐，符合Formik数据流设计）：通过Formik自带的initialValues配置设置默认值
  你只需要在顶层Formik组件的初始化参数中，添加和select的name（此处为episodeType）对应的属性，属性值为你要默认选中的option的id即可：

// App.js 中Formik组件初始化示例
<Formik
  initialValues={{
    episodeType: 2, // 替换为你需要默认选中的option的id值即可
    // 其余表单字段的初始值
  }}
  // 其余Formik配置：validationSchema、onSubmit等
>
  {/* 其余表单内容 */}
  <SelectDropdown
    control="select"
    name="episodeType"
    data-testid="episodeType"
    id="episodeType"
    label="Episode Type"
    options={dropDownValues}
  />
</Formik>

• 方式二：给SelectDropdown组件单独传入默认值props
  如果你需要脱离Formik的全局初始值配置，单独给该下拉框设置默认值，你可以改造SelectDropdown组件，新增defaultValue参数接收：

// SelectDropDown.js 修改示例
export default function SelectDropdown(props) {
  return (
    <select
      name={props.name}
      id={props.id}
      defaultValue={props.defaultValue} // 绑定传入的默认值
      // 其余select原有属性，如Formik绑定的onChange、value等保留
    >
      {props.options.map((option) => {
        return (
          <option key={option.id} value={option.id} title={option.title}>
            {option.name}
          </option>
        );
      })}
    </select>
  )
}

调用组件时直接传入defaultValue参数即可：

// App.js 调用示例
<SelectDropdown
  control="select"
  name="episodeType"
  data-testid="episodeType"
  id="episodeType"
  label="Episode Type"
  options={dropDownValues}
  defaultValue={2} // 替换为你需要默认选中的option的id
/>

注意：如果同时配置了Formik的initialValues和组件的defaultValue，Formik的全局初始值优先级更高，会覆盖组件传入的默认值。

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