React中如何用ref引用多元素、定位点击按钮及识别select的optgroup

单个useRef实例同一时间只能存储一个DOM引用，你给两个按钮绑定同一个ref，后渲染的按钮会覆盖之前存储的引用，所以最终refData.current永远指向第二个按钮。

最优解决方案：直接通过点击事件对象获取目标元素 #

点击事件回调的入参e.target本身就是当前被点击的按钮DOM，完全不需要借助ref：

const handleClick = (e) => {
  console.log(e.target); // 直接输出当前点击的按钮元素
  console.log(e.target.getAttribute('label')); // 可获取按钮的label属性区分btn1/btn2
}

<button label={'btn1'} onClick={handleClick}>
1
</button>
<button label={'btn2'} onClick={handleClick}>
2
</button>

若必须使用ref的方案 #

可以声明存储多个引用的ref对象，分别绑定对应按钮：

const btnRefs = useRef({
  btn1: null,
  btn2: null
});

const handleClick = (btnKey) => {
  console.log(btnRefs.current[btnKey]);
}

<button ref={el => btnRefs.current.btn1 = el} label={'btn1'} onClick={() => handleClick('btn1')}>
1
</button>
<button ref={el => btnRefs.current.btn2 = el} label={'btn2'} onClick={() => handleClick('btn2')}>
2
</button>

可以借助ref实现，但完全没有必要，通过onChange的事件对象即可直接拿到所属分组：选中的option元素的父元素就是它所属的optgroup，直接取父元素的label属性即可区分分组。

const handleSelect = (e) => {
  const selectedOption = e.target.selectedOptions[0];
  const groupLabel = selectedOption.parentElement.label;
  console.log('所属optgroup的label：', groupLabel); // 输出opt1或者opt2
}

// 组件部分无需修改
<NativeSelect  name='excercises' onChange={handleSelect}>
  <optgroup label={'opt1'} >
    {optionsA.map((option, index) => (
      <option key={option.id}>{option}</option>
    ))}
  </optgroup>
  <optgroup label={'opt2'} >
    {optionsB.map((option) => (
      <option key={option.id}>{option.supplment}</option>
    ))}
  </optgroup>
</NativeSelect>

如果非要用ref实现，只需要给NativeSelect绑定一个ref，后续通过ref.current.selectedOptions[0]拿到选中项，后续逻辑和事件对象的处理完全一致。

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