React函数式组件中获取Select onChange值失败：target为null求助

嘿，我来帮你搞定这个select取值的问题！

你遇到的event.target为null的情况，其实是React合成事件的池化机制导致的——React会复用事件对象，在你的事件处理函数执行完之后，就会把这个事件对象的属性全部清空，所以如果后续再访问它（哪怕是同步场景下偶尔也会有意外），就会拿到null。

另外你的代码还有两个小细节需要调整：

1. 初始状态设成了数组[]，但选中的选项值是字符串，类型不匹配，容易导致后续状态管理混乱；
2. 没有给select绑定value属性，这样组件不是受控组件，状态和UI可能会不同步。

给你修改后的代码，完美解决这些问题：

const ClientChoice = (props) => { 
  // 初始值设为空字符串，和选项值类型保持一致
  const [selectedClient, setSelectedClient] = useState(""); 

  function handleSelectChange(event) { 
    // 先把选中值存到变量里，避开事件对象被回收的问题
    const selectedValue = event.target.value;
    setSelectedClient(selectedValue); 
  } 

  return ( 
    {/* 绑定value到state，让组件成为受控组件，状态和UI同步 */}
    <select value={selectedClient} onChange={handleSelectChange}> 
      <option value="one">One</option> 
      <option value="two">Two</option> 
      <option value="three">Three</option> 
    </select> 
  ) 
}

简单说下为什么这么改：

• 先把event.target.value存到变量里，这样不管React怎么处理事件对象，我们已经拿到了需要的值；
• 给select加上value={selectedClient}，让组件的选中状态完全由state控制，这是React推荐的受控组件写法，能避免很多状态不一致的坑；
• 初始状态改成空字符串，和选项值的类型统一，后续操作更顺畅。

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