React.js下拉菜单触发onChange事件时如何传递选中值而非整个数组

问题原因 #

• 你错误地给原生<select>的value属性绑定了整个选项数组accountIDlist，而select的value属性只能接收当前选中的单个值，这是导致onChange触发时拿到完整数组的核心原因
• 代码同时嵌套了自定义<Select>组件和原生<select>标签，属于冗余嵌套，两套选择器逻辑冲突也会引发取值异常

修正方案 #

方案1：仅使用原生select（去掉外层自定义Select组件） #

// state中需要新增字段存储当前选中值
const { accountIDs, selectedAccountID } = this.state;

let accountIDlist = 
    accountIDs.length > 0 &&
    accountIDs.map((item, i) => {
        return (
            <option key={i} value={item}>
                {item}
            </option>
        );
    }, this);

<select
    style={{ width: "100%" }}
    defaultValue="123"
    value={selectedAccountID} // 绑定当前选中的单个值
    onChange={e => {
        const selectedVal = e.target.value; // 从事件对象取选中值
        console.log(selectedVal);
        this.reset();
        this.setAccountID(selectedVal);
    }}
>
    {accountIDlist}
</select>

方案2：使用组件库Select（不需要嵌套原生select，以Ant Design为例） #

const { accountIDs, selectedAccountID } = this.state;

let accountIDlist = 
    accountIDs.length > 0 &&
    accountIDs.map((item, i) => {
        // 替换为组件库对应Option组件
        return (
            <Select.Option key={i} value={item}>
                {item}
            </Select.Option>
        );
    }, this);

<Select
    style={{ width: "100%" }}
    defaultValue="123"
    autosize={true}
    value={selectedAccountID}
    onChange={val => {
        // 组件库Select的onChange直接返回选中值
        console.log(val);
        this.reset();
        this.setAccountID(val);
    }}
>
    {accountIDlist}
</Select>

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