React.js中如何禁用下拉框的指定选项？

你可以通过指定需要禁用的选项值列表来实现灵活的禁用逻辑，完全摆脱固定索引的限制，具体实现如下：

1. 定义禁用值列表 #

先创建一个数组存放需要禁用的选项值，后续只需修改这个数组就能调整禁用范围，不用关心选项的顺序或数量变化。

2. 动态设置禁用属性 #

在渲染<option>时，判断当前选项的标识值（比如value或唯一ID）是否在禁用列表中，匹配则添加disabled属性。

修改后的完整代码：

import React from 'react'
import { inputs } from '../Common/Data';

const Dropdown = () => {
    const data = inputs;
    // 定义需要禁用的选项值列表，替换成你实际要禁用的value
    const disabledValues = ['禁用选项A', '禁用选项C'];

    return (
        <>
            <div className='form-group'>
                <div className="col-4">
                    <select className="form-select" aria-label="Disabled select example">
                        <option selected>Select an Option</option>
                        {data.purpose.map((item) => (
                            <option 
                                key={item.value} // 添加唯一key，符合React列表渲染规范
                                disabled={disabledValues.includes(item.value)}
                            >
                                {item.value}
                            </option>
                        ))}
                    </select>
                </div>
            </div>           
        </>
    )
}

export default Dropdown

关键说明 #

• 这种方式完全脱离了选项的索引依赖，不管data.purpose里的选项顺序调整、新增或删除，只要禁用列表里的值匹配，对应的选项就会被禁用。
• 如果你的选项有唯一ID字段（比如item.id），用ID来判断会比value更可靠（避免value重复的情况），只需把disabledValues改成ID数组，判断时用disabledIds.includes(item.id)即可。

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