3

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

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

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

这是我使用 react-table 的示例：

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

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

在此处输入图像描述

更新： 我可以通过使用autoFocus原生 HTML 的支持来专注于输入。

答案在这里

但我仍然想通过使用来处理焦点React Ref

4

2 回答 2

3

我用plainJavaScript来实现你的目标

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

使用 react-table 编辑可编辑

我使用requestAnimationFrame是因为我正在操作 DOM，请查看此答案以获取更多详细信息。

于 2020-02-27T16:47:14.490 回答
1

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

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

你可以使用useImeprativeHandle()which can be；

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

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

或者

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

于 2020-02-19T06:21:11.890 回答