React中select与option组件ref使用：选中选项时如何存入ref？

• 核心实现不需要复杂逻辑：给select绑定change事件，在回调里拿到用户选中的选项值，同步写入提前定义的ref即可。

具体实现步骤 #

• 先做好ref的拆分，避免引用覆盖
  你现有代码里的selectRef是绑定在select DOM节点上的，如果直接把选中值写到这个ref里，会把原本存储的DOM引用冲掉，后续想通过ref操作select（比如触发聚焦、读取原生属性）会直接拿到undefined报错。需要单独开一个专门存选中值的ref：

  // 绑定select DOM的ref，保持原有引用
  const selectRef = useRef(null);
  // 独立存储选中值的ref
  const selectedCategoryRef = useRef('');
  

• 绑定change事件写值
  用户选中选项时会触发select的change事件，回调里可以直接通过事件对象拿到当前选中的option值，同步赋值给存值的ref：

  const handleCategoryChange = (event) => {
    // event.target.value 就是当前选中的option的value，对应代码里的item.name
    const selectedVal = event.target.value;
    // 写入ref完成存储
    selectedCategoryRef.current = selectedVal;
  }
  

• 顺手修正现有代码的反模式问题
  你现在给option设置的key是Math.random().toString()，这是典型的反模式：每次组件重渲染都会生成全新的随机key，React会判定所有option都是新节点，全部销毁重建，既浪费性能，还可能导致选中状态丢失、滚动位置错位。建议换成category数据里的固定唯一值，比如item.id、item编码，没有唯一标识的话，不重复的item.name也可以。

完整可复用的代码示例 #

import { useRef } from 'react';
import style from './xxx.module.css';

export default function CategorySelect({ categoryList }) {
  const selectRef = useRef(null);
  const selectedCategoryRef = useRef('');

  const handleChange = (e) => {
    selectedCategoryRef.current = e.target.value;
  }

  return (
    <select 
      className={style.formInput} 
      ref={selectRef}
      onChange={handleChange}
    >
      {categoryList.map((item) => (
        <option 
          value={item.name}
          key={item.id ?? item.name}
        >
          {item.name}
        </option>
      ))}
    </select>
  )
}

避坑提醒：不要图省事直接把选中值写到绑定DOM的selectRef上，这种写法会把DOM引用覆盖，后续所有依赖这个ref的DOM操作都会失效。

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