如何获取react-select组件的name属性？onChange读取target.name报错

错误原因 #

1. 回调参数误解：react-select的onChange回调第一个参数不是DOM事件对象，开启isMulti多选时，它是选中的选项数组（单选时是单个选项对象），不存在e.target，所以会报cannot read property 'name'的错误。
2. 语法错误：原代码里return语句写在了Home函数体外，会导致组件无法正常渲染。

修复方案 #

方案1：通过onChange第二个参数获取name

react-select的onChange提供第二个元数据参数，里面包含组件的name属性，直接取用即可：

import Select from 'react-select';

const Home = () => {
    const animals = [
        { label: 'cat', value: 'cat' },
        { label: 'dog', value: 'dog' },
        { label: 'lion', value: 'lion' },
        { label: 'eagle', value: 'eagle' },
    ];

    const handleChange = (selectedOptions, meta) => {
        console.log('组件name:', meta.name); // 输出"animals"
        console.log('选中的选项:', selectedOptions); // 多选时是数组，单选时是单个对象
    };

    return (
        <> 
            <Select 
                name="animals" 
                options={animals} 
                isMulti 
                onChange={handleChange} 
            />
        </>
    );
};

方案2：直接使用定义好的name值

如果name是固定值，也可以直接在回调里使用字符串，不用从参数获取：

import Select from 'react-select';

const Home = () => {
    const animals = [
        { label: 'cat', value: 'cat' },
        { label: 'dog', value: 'dog' },
        { label: 'lion', value: 'lion' },
        { label: 'eagle', value: 'eagle' },
    ];

    return (
        <> 
            <Select 
                name="animals" 
                options={animals} 
                isMulti 
                onChange={(selectedOptions) => {
                    console.log('组件name:', 'animals');
                    console.log('选中的选项:', selectedOptions);
                }} 
            />
        </>
    );
};

额外提示 #

• 多选模式下，selectedOptions是数组，每个元素是你定义的选项对象（包含label和value）；单选模式下则是单个选项对象。
• 务必保证return语句在组件函数体内，否则组件无法渲染。

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