反应；状态改变时保持输入焦点

Question

我正在编写一个编辑器，我希望在其中收到任何更改的通知 文档。所以我创建了一个组件树，每个节点向父节点报告 通过onChange(..) 回调：

// Pseudo structure.
Root {
    const [changed, setChanged] = useState(true)
    function onChange(..) {
      setChanged(true);
    }

    return (
        <App>
          <Status saved={!changed} />
          <Editor onChange={onChange}>
            <Text onChange={onChange} />
            <Image onChange={onChange} />
          </Editor>
        </App>
    );
}

现在我必须创建一个<Table> 组件，其中每个单元格都是可编辑的输入 触发onChange 回调。由于Root 中的useState，每个 当我们改变表格中的一个字母时，整个结构就被渲染出来了。

但是渲染会导致焦点松动，这确实很烦人 键入文本。我目前的解决方案是通过useMemo 将当前单元格保存在我的 新的Table 组件并在渲染组件时请求焦点。 但是，我仍然松开插入符号的位置，我觉得这是一个 hacky 工作方式（这就是我联系您的原因）。

如何通知更改并更新我的 Root 的状态而不会丢失 从一个输入获得焦点？

谢谢

Answer 1

我的建议

1. 将无状态组件保留为子组件。
2. 为每个单元格使用键以避免从父级进行不必要的重新渲染。