如何在React中禁用来自外部模块的下拉选项并将其设为不可选占位符

你只需要在循环渲染<option>的时候，对目标选项动态添加disabled属性即可，不需要修改常量文件的配置，有两种实现方式可选：

方法1：按label判断（匹配你指定的需求条件） #

直接在渲染option的时候判断item.label是否等于Choose one，符合条件就加disabled属性，修改App.js里的Select渲染部分：

<Select
  disabled={false}
  onChange={this.handleSelected}
  // 注意：原代码从props取dropSelected，但值存在state中，需要修改为从state取值
  value={this.state.dropSelected}
>
  {dropdownDenied.map((item, index) => (
    <option 
      value={item.value || ""} 
      key={index}
      // 核心逻辑：匹配目标选项则添加禁用属性
      disabled={item.label === "Choose one"}
      // 若需要默认选中该占位项可以加下面这行，你state初始值为""和该选项value匹配，不加也会默认选中
      selected={item.value === ""}
    >
      {item.label}  
    </option>
  ))}
</Select>

方法2：按value判断（更稳妥，避免label修改后逻辑失效） #

因为你的Choose one对应的value是空字符串，也可以直接通过value判断添加禁用属性：

disabled={item.value === ""}

该方式的优势是后续如果修改了占位项的label文案，禁用逻辑也不会受影响。

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