如何修复React自定义Select组件与Formik集成时选项不更新问题

问题根源 #

Formik的handleChange默认是为标准HTML表单元素设计的，它需要接收一个React.ChangeEvent对象，通过读取target.name和target.value来定位并更新对应的表单字段。但你的自定义Select组件在触发onChange时，直接传递了选项的字符串值，Formik拿不到字段名，所以无法更新formikAddress.values.country。

修复方案 #

方案一：适配Formik的事件格式（推荐） #

修改自定义Select组件的事件传递逻辑，构造符合Formik要求的模拟事件对象，同时给组件添加name属性来指定字段名：

1. 扩展Select组件的Props接口，新增name字段：

interface SelectProps {
    label: string;
    options: SelectOption[];
    value?: string;
    onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
    className?: string;
    name: string; // 新增name属性，用于指定Formik字段名
}

2. 修改组件内的handleOptionClick方法，传递模拟的ChangeEvent：

const handleOptionClick = (optionValue: string) => {
    setIsOpen(false);
    // 构造模拟事件，让Formik能识别字段名和对应值
    onChange({
        target: {
            name: name, // 使用传入的name属性
            value: optionValue
        }
    } as React.ChangeEvent<HTMLSelectElement>);
};

3. 在表单中使用Select时，传递name属性：

<Select
    name="country" // 对应Formik initialValues中的字段名
    label="Country: *"
    options={countryOptions}
    value={formikAddress.values.country}
    onChange={formikAddress.handleChange}
/>

方案二：直接使用Formik的setFieldValue（快速修复） #

不需要修改自定义Select组件，在表单中直接通过formikAddress.setFieldValue手动更新字段：

<Select
    label="Country: *"
    options={countryOptions}
    value={formikAddress.values.country}
    onChange={(value) => formikAddress.setFieldValue('country', value)}
/>

额外优化点 #

• 给Select组件的输入容器添加id，并关联到label的htmlFor，提升页面可访问性：

// 组件内的label和输入容器修改
<label
    htmlFor={name}
    // ...其他样式
>
    {label}
</label>
<div
    id={name}
    // ...其他样式和事件
>
    {selectedOption?.label}
</div>

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