javascript - 如何自动聚焦于 React 中的特定输入字段(单击另一个元素后)？

Question

我在一个表中有几个输入字段(每行都有一个输入字段)，每个字段都是动态命名的，如下所示:

<table>
  <tr>
    <td>
     <input
      key={name}
      type="text"
      value={label}
      name={name}
     />

     <span>Edit</span>
   </td>
  </tr>
</table>

注意，我正在映射某个对象以渲染每个 <td />包含一个输入字段。

我希望发生的是，当我单击该特定行的“编辑”时，同一行上的输入字段将成为焦点。

我从React文档中看到的是，如果您有一组预定义的输入字段并且您能够执行createRef()，则如何触发此焦点对于每个字段。

但是，如果您的输入字段是动态呈现的并且可能有 X 个输入字段(取决于所映射的对象)，您该怎么做？

Answer 1

您可以创建映射到表中每个项目的多个引用，如下例所示。

  const rows = [
    { id: "a", name: "Panel 1" },
    { id: "b", name: "Panel 2" },
    { id: "c", name: "Panel 3" }
  ];

  const refs = useRef(new Map()).current;
  return (
    <div>
      <table>
        {rows.map(row => (
          <tr>
            <td>
              <input
                label={row.name}
                ref={inst =>
                  inst === null ? refs.delete(row.id) : refs.set(row.id, inst)
                }
                type="text"
              />
              <span onClick={() => refs.get(row.id).focus()}>Edit</span>
            </td>
          </tr>
        ))}
      </table>
    </div>

这是一个link到一个工作沙箱。