如何在React创建的select下拉option中绑定变量控制禁用状态

你现有代码存在三个核心逻辑/语法疏漏，直接按以下调整即可生效：

关键问题点 #

• JSX属性规则和原生JS不通用：原生JS中给元素加disabled的写法在JSX里需要直接将disabled作为布尔属性传递，你之前把状态值包成自定义属性optionStatus的写法，React无法自动映射到原生DOM的禁用态上
• 原有条件判断逻辑完全失效：你之前写的三元判断无论结果是啥，赋值给optionStatus的值都是字符串"disabled"，根本没做差异化判断
• 作用域传递逻辑错误：在forEach循环里修改外层定义的optionStatus，不仅存在var的变量提升问题，而且循环遍历的执行时序和你push节点的时序错位，根本拿不到计算好的状态值

正确实现逻辑 #

JSX中<option>的禁用判定逻辑非常简单：只要给标签的disabled属性传入布尔值true，该选项就会自动变成不可选状态，传入false即为正常可选，不需要额外传"disabled"字符串。

修正后的完整代码 #

async handleSomeChange() {
  const nearByLocations = await getCoords(this.state.zip);
  if (nearByCenters) {
    let locations = [];
    for (const [index, value] of nearByLocations.entries()) {
      // 提前在当前循环块内计算每个选项的禁用状态
      let isOptionDisabled = false;
      // 遍历当前点位的服务列表，命中规则就标记为禁用
      for (const serviceKey of Object.keys(value.services)) {
        if (value.services[serviceKey].serviceCode === 600) {
          isOptionDisabled = true;
          // 命中后直接跳出循环，减少无效遍历
          break;
        }
      }
      // 将计算好的布尔值直接绑定到option的disabled属性上
      locations.push(
        <option
          value={value.siteID}
          key={index} // 循环渲染列表必须加唯一key属性，而非自定义的index属性
          disabled={isOptionDisabled}
        >
          {value.name}
        </option>
      )
    }
    this.setState({ locations: locations });
  }
}

容易踩的附加注意点 #

• 不要把自定义状态变量名直接当属性写在JSX标签上，比如<option optionStatus>这种写法没有任何实际效果
• 循环渲染节点时的key属性是React Diff算法的必要标识，不能作为普通自定义属性传递
• 遍历服务列表做状态判断时，优先用可break的普通for循环替代forEach，找到符合条件的状态后就可以终止遍历，避免多余的计算开销

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