react-hook-form结合react-select如何仅获取select的value值而非完整对象

实现方案 #

你只需要手动接管Controller渲染回调中react-select的onChange和value属性，调整值的传递逻辑即可，修改后的代码如下：

import CreatableSelect from "react-select/creatable";

const scriptOptions = [
    { value: "imd", label: "Immediate" },
    { value: "sch", label: "Scheduled" },
];

<Controller
    name="resetType"
    control={control}
    defaultValue="imd" // 可按需设置默认值，也可以统一在useForm初始化时定义
    render={({ field }) => {
        // 处理回显：用form中存储的字符串value匹配对应的option对象
        const selectedOption = scriptOptions.find(opt => opt.value === field.value) || null;
        return (
            <CreatableSelect
                value={selectedOption}
                options={scriptOptions}
                // 仅提交选中项的value属性给react-hook-form存储
                onChange={(option) => field.onChange(option?.value)}
            />
        )
    }}
/>

逻辑说明 #

• 原来直接展开{...field}会把react-select返回的完整option对象直接存入表单字段，现在单独重写onChange和value两个属性即可切断默认的对象传递逻辑
• 如果使用CreatableSelect需要支持用户自定义新增选项，只需要在onChange回调中补充自定义新值的处理逻辑即可，存储逻辑保持只取value字段的规则就行。

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