如何存储react-select组件选中值并处理onChange事件

你的问题出在对react-select的onChange回调参数理解有误——它不返回原生事件对象，而是直接返回当前选中的选项对象（多选场景下是选项数组），不需要用e.target去取值。

修正后的代码如下：

import React, { useState } from "react";
import Select from "react-select";

const Options = () => {
    const options = [
        { value: "chocolate", label: "Chocolate" },
        { value: "strawberry", label: "Strawberry" },
        { value: "vanilla", label: "Vanilla" },
    ];

    const [selectedValue, setSelectedValue] = useState(options[0])
    // 直接接收选中的选项对象
    const selectHandler = (selectedOption) => {
        setSelectedValue(selectedOption)
    }
    console.log(selectedValue)
    return <Select options={options} value={selectedValue} onChange={selectHandler} />;
};

export default Options;

额外说明 #

如果你只想存储选项的value字段（比如字符串"chocolate"）而非整个对象，需要调整状态和组件的value属性匹配逻辑：

import React, { useState } from "react";
import Select from "react-select";

const Options = () => {
    const options = [
        { value: "chocolate", label: "Chocolate" },
        { value: "strawberry", label: "Strawberry" },
        { value: "vanilla", label: "Vanilla" },
    ];

    // 初始值存value字符串
    const [selectedValue, setSelectedValue] = useState(options[0].value)
    
    const selectHandler = (selectedOption) => {
        // 只保存value字段
        setSelectedValue(selectedOption.value)
    }
    
    // 通过value匹配对应的选项对象传给组件的value属性
    const selectedOption = options.find(opt => opt.value === selectedValue)
    
    return <Select options={options} value={selectedOption} onChange={selectHandler} />;
};

export default Options;

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