Multi React-Select多选场景无法正确设置选中值问题咨询

核心问题与修复方案 #

你遇到的选中异常是两个基础配置错误导致的，加上选择数量限制的逻辑，按如下修改即可：

改动点

• 事件绑定错误：你使用的onInputChange是监听搜索框输入内容的事件，选中选项触发的是onChange事件，需要替换监听事件
• value属性绑定错误：你将value绑定了全量选项数组genres，所以会出现所有选项默认全选的问题，这里需要绑定存储选中结果的genreName状态
• 新增选中数量限制：在选中变更回调中判断选中长度，超过2个时不更新状态，实现最多选2个的限制

修复后完整代码

import { useState } from 'react';
import Select from 'react-select';

const genres = [
    { value: 'acoustic', label: 'acoustic' },
    { value: 'afrobeat', label: 'afrobeat' },
    { value: 'alt-rock', label: 'alt-rock' },
    { value: 'alternative', label: 'alternative' },
    { value: 'brazil', label: 'brazil' },
    { value: 'breakbeat', label: 'breakbeat' },
]

const AddGenre = () => {
    const [ariaFocusMessage, setAriaFocusMessage] = useState('');
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    // 存储选中的流派
    const [genreName, setGenreName] = useState([]);

    const onFocus = ({ focused, isDisabled }) => {
        const msg = `You are currently focused on option ${focused.label}${isDisabled ? ', disabled' : ''}`;
        setAriaFocusMessage(msg);
        return msg;
    };

    const onMenuOpen = () => setIsMenuOpen(true);
    const onMenuClose = () => setIsMenuOpen(false);

    // 选中变更回调
    const handleSelectChange = (newSelected) => {
        // 限制最多选2个
        if (newSelected.length <= 2) {
            setGenreName(newSelected);
        }
    }

    return (
        <div className="bodyComp">
            <form>
                <label id="aria-label" htmlFor="aria-example-input">
                    Select a Genre
                </label>
                <Select
                    isMulti
                    aria-labelledby="aria-label"
                    ariaLiveMessages={{
                        onFocus,
                    }}
                    // 选中变更触发
                    onChange={handleSelectChange}
                    options={genres}
                    // 绑定选中状态
                    value={genreName}
                    inputId="aria-example-input"
                    name="aria-live-color"
                    onMenuOpen={onMenuOpen}
                    onMenuClose={onMenuClose}
                />
            </form>
        </div>
    )
};

export default AddGenre

补充说明

react-select默认自带搜索能力，不需要额外配置即可直接输入筛选选项，默认会匹配选项的label字段进行筛选。如果需要自定义搜索规则可以再配置filterOption属性。

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