react-select多选场景下如何在选中项仅剩1个时动态添加isFixed属性

你需要在原有删除逻辑的基础上新增选中项长度的判断逻辑，在选中项仅剩1个时自动为其添加isFixed=true属性即可，修改后的完整代码如下：

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

const options = [
    { value: 'apple', label: 'Apple' },
    { value: 'orange', label: 'Orange' },
    { value: 'grape', label: 'Grape' },
];
const orderOptions = (values) =>
    values && values.filter((v) => v.isFixed).concat(values.filter((v) => !v.isFixed));
export default function TestSelect() {
    const [value, setValue] = useState(orderOptions([...options]));
    console.log('value', value);
    const onChange = (value, { action, removedValue }) => {
        switch (action) {
            case 'remove-value':
            case 'pop-value':
                if (removedValue.isFixed) {
                    return;
                }
                break;
            case 'clear':
                // 清除操作时保留第一个选中项，避免全部清空
                value = value.length ? [value[0]] : [options[0]];
                break;
            default:
                break;
        }
        // 剩余选中项仅1个时，自动添加isFixed属性
        if (value.length === 1) {
            value = value.map(item => ({...item, isFixed: true}));
        }
        value = orderOptions(value);
        setValue(value);
    };
    return (
        <div>
            <Select
                value={value}
                isMulti
                isClearable={value && value.some((v) => !v.isFixed)}
                name="fruit"
                classNamePrefix="select"
                onChange={onChange}
                options={options}
                defaultValue={options}
            />
        </div>
    );
}

核心改动点 #

• 在onChange方法处理完删除/弹出/清除操作后，新增选中项长度判断：当剩余选中项长度为1时，通过不可变更新的方式为唯一选中项添加isFixed: true属性，禁止后续删除操作
• 补充了清除操作的兜底逻辑，避免用户点击清除按钮后全部选中项被清空
• 原有isClearable逻辑会自动在所有选中项均为固定项时隐藏清除按钮，无需额外修改

内容的提问来源于stack exchange，提问作者faisal-akbar