React useRef钩子：如何程序化触发多个<td>的点击事件？

你之前用单个useRef绑定多个<td>，只会拿到最后一个元素的ref——因为每次循环都会覆盖cellRef.current的值。要实现指定序号触发点击，得用ref数组来存储每个单元格的DOM引用：

步骤1：创建存储ref的数组 #

用useRef初始化一个空数组，用来保存每个<td>的DOM节点：

const cellRefs = useRef([]);

步骤2：给每个分配对应ref #

在map循环时，把每个<td>的ref存入数组对应索引的位置：

{row.map((c, i) => (
  <td
    key={i} // 必须加key，符合React列表渲染规范
    className="cell"
    ref={el => cellRefs.current[i] = el} // 将当前元素存入数组对应位置
    onClick={handleCell}
  >
    {c}
  </td>
))}

步骤3：编写触发指定序号点击的函数 #

现在可以通过索引直接调用对应单元格的click()方法：

const triggerCellClick = (cellNumber) => {
  const targetCell = cellRefs.current[cellNumber];
  if (targetCell) {
    targetCell.click();
  }
};

// 示例：触发第一个单元格点击
triggerCellClick(0);

完整代码示例 #

import { useRef } from 'react';

export const Row = ({ row }) => {
  const cellRefs = useRef([]);

  const handleCell = (e) => {
    console.log('单元格被点击', e.target.textContent);
  };

  const triggerCellClick = (cellNumber) => {
    const targetCell = cellRefs.current[cellNumber];
    if (targetCell) {
      targetCell.click();
    }
  };

  return (
    <>
      <tr>
        {row.map((c, i) => (
          <td
            key={i}
            className="cell"
            ref={el => cellRefs.current[i] = el}
            onClick={handleCell}
          >
            {c}
          </td>
        ))}
      </tr>
      {/* 测试按钮：点击触发第二个单元格的点击事件 */}
      <button onClick={() => triggerCellClick(1)}>触发第二个单元格点击</button>
    </>
  );
};

注意事项 #

• 列表项必须加key，避免React渲染异常。
• 调用triggerCellClick时要做存在性判断，防止数组越界或DOM节点未挂载的情况。

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