React中如何在点击事件函数内获取被点击按钮的ref值

e.target.ref 无法生效是React的特性导致的：ref是React的特殊保留属性，不会被挂载到原生DOM节点上，因此原生事件对象的target属性上根本不存在ref字段，自然读不到你绑定的ref值。

根据你的场景选任意一种即可：

• 优先选：自定义data属性标记，实现最简单无额外依赖
  不需要依赖ref做匹配，直接给按钮加自定义data-*属性存对应的ref标识，事件触发时直接从DOM的dataset里读值即可，兼容性最好：

  // 按钮定义
  <button ref={btnRef1} data-ref-name="btnRef1" onClick={loader}></button>
  <button ref={btnRef2} data-ref-name="btnRef2" onClick={loader}></button>
  
  // 事件处理逻辑
  const loader = (e) => {
    console.log(e.target.dataset.refName);
    // 点击第一个按钮直接输出 "btnRef1"，完全符合你的预期
  };
  

• 必须匹配ref实体时：直接做DOM节点比对
  如果你需要拿到的不是字符串标识，而是ref对象本身，可以利用ref.current存储的就是对应原生DOM的特性，拿事件触发的target节点和各个ref的current值做全等匹配即可：

  // 提前用useRef/createRef声明好两个ref
  const btnRef1 = useRef(null);
  const btnRef2 = useRef(null);
  
  const loader = (e) => {
    const clickedDom = e.target;
    if (clickedDom === btnRef1.current) console.log("btnRef1");
    if (clickedDom === btnRef2.current) console.log("btnRef2");
  };
  

  如果按钮数量多，可以把所有ref存在一个键值对映射表里，遍历匹配就行，不用写大量条件判断。

• 逻辑最直观：绑定事件时直接传参
  不需要在事件触发后反向查找，绑定onClick的时候直接把对应的ref标识当参数传入处理函数即可：

  // 按钮定义
  <button ref={btnRef1} onClick={() => loader("btnRef1")}></button>
  <button ref={btnRef2} onClick={() => loader("btnRef2")}></button>
  
  // 处理函数
  const loader = (refFlag) => {
    console.log(refFlag); // 直接拿到传入的标识
  };
  

注意：不要使用给ref赋值字符串的旧写法，这种写法在React新版本里已经被废弃，会有性能和兼容性问题。

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