获取下拉菜单选中项打印时event.target返回undefined问题求助

问题原因 #

下拉菜单event.target返回undefined主要有两类常见触发场景：

• 使用第三方UI组件库的下拉组件：绝大多数UI库（如Ant Design、Material UI）的Select组件onChange回调的第一个参数并非原生事件对象，而是直接返回选中项的value，不存在target属性，强行调用就会返回undefined。
• 使用原生<select>标签且在异步逻辑中取值：React17及之前的版本存在合成事件池机制，事件回调执行完成后事件对象会被回收重置属性，若你在setTimeout、接口请求回调等异步逻辑中访问event.target，此时属性已经被清空。

解决方法 #

针对第三方UI组件库下拉场景 #

直接取onChange回调的第一个参数作为选中值即可，无需访问target，示例代码：

const handleSelectChange = (selectedValue, option) => {
  // 直接打印第一个参数即可拿到选中值
  console.log(selectedValue)
  // 如需选中项的label等其他属性，可从第二个参数option中获取
}

// 组件绑定回调
<Select onChange={handleSelectChange}>
  <Option value="1">选项1</Option>
  <Option value="2">选项2</Option>
</Select>

针对原生下拉异步访问场景 #

两种方案可选：

• 提前把需要的属性值存入局部变量，异步逻辑直接访问局部变量即可
• 调用event.persist()将事件对象从事件池中移除，避免被回收重置
  示例代码：

// 方案1：提前存值
const handleNativeChange = (e) => {
  const value = e.target.value
  setTimeout(() => {
    console.log(value)
  }, 500)
}

// 方案2：调用persist保留事件对象
const handleNativeChange = (e) => {
  e.persist()
  setTimeout(() => {
    console.log(e.target.value)
  }, 500)
}

// 原生select绑定
<select onChange={handleNativeChange}>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
</select>

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