如何在Formik字段中嵌套React-Select组件？

你遇到的错误是因为Formik的<Field>组件默认会渲染一个<input>标签（属于void元素，不允许包含子节点），直接将<Select>嵌套在<Field>内部就会触发这个报错：

Uncaught Error: input is a void element tag and must neither have children nor use `dangerouslySetInnerHTML'

错误的代码写法：

<Field name="state">
  <Select
    placeholder="Select State"
    value={myState}
    options={DataJSON}
    onChange={handleStateChange}
    getOptionLabel={(x) => x!.name}
    getOptionValue={(x) => x!.name}
  />
</Field>

正确的实现方式 #

方式一：使用<Field>的component属性

通过component传入自定义组件，将Formik的字段绑定逻辑传递给React-Select：

<Field
  name="state"
  component={({ field, form }) => (
    <Select
      placeholder="Select State"
      {...field}
      options={DataJSON}
      getOptionLabel={(x) => x!.name}
      getOptionValue={(x) => x!.name}
      onChange={(selectedOption) => {
        // 同步更新Formik字段值
        field.onChange(selectedOption);
        // 若需更新本地状态，可在此添加
        // setMyState(selectedOption);
      }}
    />
  )}
/>

方式二：手动绑定Formik上下文

在Formik组件内部，通过useFormikContext获取上下文，直接控制字段值的更新：

import { useFormikContext } from 'formik';

// 组件内部
const formik = useFormikContext();

return (
  <Select
    placeholder="Select State"
    value={formik.values.state}
    options={DataJSON}
    getOptionLabel={(x) => x!.name}
    getOptionValue={(x) => x!.name}
    onChange={(selectedOption) => {
      // 手动设置Formik字段值
      formik.setFieldValue('state', selectedOption);
      // 同步本地状态
      // setMyState(selectedOption);
    }}
  />
);

两种方式都能实现React-Select与Formik的绑定，第一种更贴合Formik的组件化用法，第二种则更灵活，适合需要自定义逻辑的场景。

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