React>如何使用react-table在添加新行后设置输入字段的焦点

Question

我决定使用react-table来构建网格。

要有更好的UI，只有一件事，那就是在单击AddNew按钮后，我想关注新项目的输入字段。

我打算使用ref，但不知道如何fowardRef子项

下面是我使用react表的示例：

https://codesandbox.io/s/beautiful-proskuriakova-lpfxn

在这种情况下，我希望在添加新行后关注字段First Name。

更新：我可以通过使用本机HTML提供的autoFocus支持来关注输入。

答案在这里

但我仍然希望通过使用React Ref

Answer 1

您正试图在功能组件上应用forwardRef（），并作出响应

不能在函数组件上使用ref属性React ref doc

您可以使用useimprativehandle（），它可以：；

const Table = React.forwardRef((props, ref) => {
  const inputRef = React.useRef();
  React.useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }), []);
  return <Editable ref={inputRef} {...props} />;
}

现在您可以通过创建ref来访问ref，并调用命令式的方法。我没有研究如何集中元素，但您可以使用命令式handle处理forwardRef问题。

您可以将EditTable组件转换为基于分类的comp。

Answer 2

我用了纯JavaScript来实现你的目标

  const setFocus = () => {
    //Add id to the table
    document.getElementsByTagName("TABLE")[0].setAttribute("id", "mytable");

    //table > tbody > tr (latest added row) > td (first cell in the row) > input
    let cell = document.getElementById("mytable").lastElementChild
      .lastElementChild.firstElementChild.children[0];

    cell.focus();
  };

  const addNew = () => {
    setData(old => [...old, {}]);
    window.requestAnimationFrame(setFocus);
  };

我使用请求动画框架，因为我正在操作DOM，查看此答案以了解更多详细信息。