React中使用useState修改布尔值时select组件未正确禁用问题

核心问题：disabled属性逻辑完全搞反了 #

你预期isPackage=true时启用select（即disabled=false），isPackage=false时禁用select（即disabled=true），但当前代码：

<select disabled = { isPackage ? true : false }>

实际逻辑完全和预期相反：

• isPackage=false → disabled=false → select处于启用状态
• isPackage=true → disabled=true → select处于禁用状态

另外这段三元表达式属于冗余写法，isPackage本身就是布尔值，没必要额外转换为true/false。

修复方案 #

1. 修正disabled逻辑，直接对isPackage取反即可：

<select disabled={!isPackage}>

此时逻辑完全符合预期：

• isPackage=true → disabled=false → select启用
• isPackage=false → disabled=true → select禁用

2. 优化状态切换函数（可选但更可靠）
   如果存在连续点击的场景，直接使用!isPackage可能因闭包问题导致状态更新不及时，建议改用函数式更新：

const handlerPresentationSelected = () => {
  setIsPackage(prevState => !prevState)
}

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