react-select提交时仅保存value值的实现方案咨询

你只需要调整onChange回调逻辑，从选中的选项对象里提取value属性存入状态，同时给Select组件设置匹配的value属性，保证选中状态正确显示：

修改步骤 #

• 调整onChange事件：react-select的onChange会返回选中的完整选项对象，我们只需要取其中的value字段更新状态
• 设置组件value属性：通过find方法从选项列表中匹配当前状态对应的选项对象，确保组件正确显示选中项

修改后的完整代码示例 #

const [mainLang, setMainLang] = useState("");
const mainLangOptions = [
    { value: 'vi', label: 'Vietnamese' },
    { value: 'en', label: 'English' },
    { value: 'zh', label: 'Chinese' },
    { value: 'ja', label: 'Japanese' },
    { value: 'de', label: 'German' },
];

// Select组件部分
<Select 
    value={mainLangOptions.find(option => option.value === mainLang)}
    onChange={(selectedOption) => setMainLang(selectedOption.value)}
    options={mainLangOptions}
/>

说明 #

• 提交时直接使用mainLang变量即可，它存储的是选中项的value值（如'vi'、'en'），而非完整的选项对象
• value属性的设置是为了让react-select组件正确识别当前选中的选项，保持界面显示与状态一致

内容的提问来源于stack exchange，提问作者Lê Trung Hiếu