React中react-select组件handleChange参数接收逻辑问题

核心原理：第三方组件的事件回调参数由组件自身定义 #

• 原生input的onChange触发时，会按照W3C标准给回调传递浏览器原生Event对象，所以你可以通过e.target.value拿到输入值，这是原生DOM的固定逻辑
• 但react-select是第三方封装的组件，它的onChange回调参数是组件开发者自行约定的，和原生Event没有关系，照搬原生input的写法自然无法生效

你代码中的参数传递逻辑 #

你写onChange={this.handleChange}时，本质是把handleChange函数的引用直接传给了react-select组件内部。当用户选中/取消选项触发变化时，react-select内部会主动调用你传入的这个函数，并且按照它的内部规则传入参数：

1. 单选模式下：直接传递选中的option对象（就是你定义的{value: xxx, label: xxx}格式的对象），点击清空按钮时传null
2. 你代码中开启了multi={true}多选模式：会传递所有选中的option对象组成的数组，清空选中时传空数组
3. 额外还有第二个可选参数actionMeta，用来标识本次变化的操作类型（选中/取消/全清等），不需要用到可以忽略

错误写法不生效的原因 #

你写的onChange={(e)=>this.handleChange(e.target.value)}里，e根本不是原生事件对象，而是react-select传给你的选中项对象/数组，它身上没有target属性，取e.target会得到undefined，后续取value自然会报错。如果你一定要用箭头函数的写法，正确的写法应该是：

onChange={(selectedOption) => this.handleChange(selectedOption)}

这个写法和直接传this.handleChange的效果完全等价，只是多包了一层没有额外逻辑的箭头函数而已。

补充优化建议 #

你现在开启了多选模式，但是state的初始值设为了空字符串""，不符合多选的取值规则，建议把初始值改为空数组[]，避免后续取值时出现类型错误。

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