React下拉框onChange返回整个<select>标签问题求助

嘿，我一眼就发现问题所在啦！核心原因是HTML的<option>标签的value属性只能接受字符串类型的值——你直接把user对象赋值给value，浏览器会自动把对象转换成字符串"[object Object]"，这就是为什么你看到所有选项的value都是这个，而且拿不到预期的用户对象。

下面给你两种解决方案，推荐第一种（更符合React最佳实践）：

方案一：使用用户唯一标识作为option的value #

你的users数组里每个对象都有唯一的key（用uuid生成的），刚好可以用来做option的value，步骤如下：

1. 修改下拉选项的生成逻辑：

   // 把value从user改成user.key，同时key直接用user自己的key（比重新生成uuid更合理）
   let ddUsers = this.state.users.map(user => 
     <option key={user.key} value={user.key}>{user.name}</option>
   )
   

2. 更新handleFilter函数，通过选中的key找到对应的用户对象：

   handleFilter = (event) => {
     const selectedKey = event.target.value;
     // 跳过默认的禁用选项
     if (selectedKey !== "DEFAULT") {
       // 从state的users数组中匹配对应的用户对象
       const selectedUser = this.state.users.find(user => user.key === selectedKey);
       console.log("选中的用户对象：", selectedUser);
     }
   }
   

方案二：将对象序列化为JSON字符串（不推荐） #

如果你一定要直接传递对象，可以把对象转成JSON字符串，处理时再解析回来，但这种方式不如方案一可靠，容易遇到序列化/反序列化的问题：

1. 修改option的value为JSON字符串：

   let ddUsers = this.state.users.map(user => 
     <option key={user.key} value={JSON.stringify(user)}>{user.name}</option>
   )
   

2. 在handleFilter中解析字符串为对象：

   handleFilter = (event) => {
     const selectedValue = event.target.value;
     if (selectedValue !== "DEFAULT") {
       const selectedUser = JSON.parse(selectedValue);
       console.log("选中的用户对象：", selectedUser);
     }
   }
   

补充说明 #

你之前打印event.target得到的是整个<select>标签，这是正常的——event.target指向的是触发事件的DOM元素（也就是select本身），你需要的是event.target.value来获取选中的选项值，再通过它拿到对应的用户对象~

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