NextUI Select组件onChange事件无响应问题求助

问题出在你把onChange事件绑定在了<SelectItem>上——NextUI的Select组件的选择事件是绑定在<Select>根组件上的，子项不会响应onChange。

修正步骤 #

1. 将onChange从<SelectItem>移到<Select>标签上
2. Select的onChange回调会直接返回选中的选项值（或完整选项对象），无需手动传递参数

修正后的代码 #

首先确保你的处理函数接收选中值：

function handleStartingCityChange(selectedCity) {
  console.log('选中的城市:', selectedCity);
  // 在这里编写修改变量的逻辑
}

然后更新JSX部分：

<Select
  label="Starting City"
  className='max-w-xs mx-auto shadow-lg'
  startContent={<LocationCityIcon/>}
  onChange={handleStartingCityChange}
>
  {citiesArray.map((city) => (
    <SelectItem key={city} value={city}>{city}</SelectItem>
  ))}
</Select>

额外说明 #

如果需要获取选中项的完整信息（而非仅value），可以解构回调返回的对象：

<Select
  // 其他属性不变
  onChange={(selectedItem) => {
    console.log('完整选中项:', selectedItem);
    handleStartingCityChange(selectedItem.value);
  }}
>
  {/* SelectItem部分不变 */}
</Select>

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