React Select onChange触发时如何获取最新选中的选项值

你不需要找afterChange类的特殊钩子，当前拿到旧值是读取时机和读取方式错误导致的：onChange触发时，ref绑定的组件实例还未完成最新值的同步，此时读取ref上的props.value拿到的自然是更新前的旧值。React Select 的onChange回调本身就会把最新选中值作为第一个入参返回，直接使用即可，不需要绕路通过ref取值。

修正后的代码 #

选择器组件部分 #

<Select
  options={[
    { value: "1", label: "1" },
    { value: "2", label: "2" },
    { value: "3", label: "3" },
    { value: "4", label: "4" },
    { value: "5", label: "5" },
    { value: "6", label: "6" },
  ]}
  name="mySelect"
  ref={mySelect}
  instanceId="mySelect"
  defaultValue=""
  // 直接接收回调返回的最新选中项，传入取值函数
  onChange={(selectedItem) => getSelect(selectedItem)}
/>

取值函数部分 #

function getSelect(selectedItem) {
  // 单选场景下selectedItem就是当前选中的option，直接读取对应属性即可
  console.log(selectedItem.value)
}

补充说明 #

• 如果开启了isMulti多选模式，onChange返回的是所有选中项组成的数组，直接遍历数组取每项的value即可。
• 如果你需要在值更新后执行额外的关联逻辑，受控场景下可以配合useState存储选中值，用useEffect监听值变化执行后续逻辑，不要依赖ref读取组件内部属性，这种写法既不稳定，也容易遇到更新时序问题。

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