React月份选择器布尔值返回异常问题求助

核心错误原因 #

你写的pickMonth === ! ""是逻辑语法错误：

• ! ""会先计算得到布尔值true（空字符串属于JS假值，取反后为真）
• 而pickMonth是字符串类型：初始为空字符串""，选中月份后变为"1"/"2"/"3"
• 字符串和布尔值true做全等比较（===）永远不相等，所以无论是否选中月份，这个判断都会返回false

正确的判断写法 #

要实现「未选中时返回false，选中后返回true」，用以下任意一种写法即可：

1. 对原判断取反：

console.log(`pickMonth selected:`, !(pickMonth === ""))

2. 直接判断是否非空：

console.log(`pickMonth selected:`, pickMonth !== "")

3. 利用JS真值特性（空字符串是假值，非空字符串是真值）转布尔值：

console.log(`pickMonth selected:`, !!pickMonth)

额外优化提示 #

你的<select>初始值设为""，但<option>里没有对应value=""的选项，首次渲染时浏览器会自动选中第一个option，同时pickMonth会被设为"1"，和你预期的「首次无选中值」不符。如果要实现初始未选中状态，需要添加默认选项：

<select value={pickMonth} onChange={handleSelectMonth}>
  <option value="" disabled>请选择月份</option>
  <option className='monthOption' value="1">Jan</option>
  <option className='monthOption' value="2">Feb</option>
  <option className='monthOption' value="3">March</option>
</select>

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