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

Question

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

只有一件事可以做得更好UI，那就是我想在单击添加新按钮后专注于新项目的输入字段。

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

这是我使用 react-table:

的例子

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

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

更新： 通过使用原生 HTML.

的 autoFocus 支持，我可以专注于输入

答案

但我还是想用React Ref

来处理焦点

Answer 1

您正在尝试在功能组件上应用 forwardRef()，React 文档说

You may not use the ref attribute on function components React ref doc

可以用useImeprativeHandle()，可以是；

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

现在您可以通过创建 ref 来访问 ref 并调用命令的方法。我没有看如何聚焦您的元素，但您可以使用 imperativeHandle 处理 forwardRef 问题。

或

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

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);
  };

我使用 requestAnimationFrame 因为我在操纵 DOM，查看这个 answer 了解更多详情。

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

React > How to set focus on the input field after adding a new row by using react-table

reactjs

react-table

react-ref

或