React;当状态发生变化时，请将焦点放在输入中

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>组件，其中每个单元格都是可编辑的输入触发CCD_ 3回调。由于Root中的useState每当我们更改表中的一个字母时，整个结构就会呈现出来。

但是渲染会导致焦点不集中，这对键入文本。我目前的解决方案是通过useMemo将当前单元格保存在我的新的CCD_ 7组件并在该组件被渲染时请求聚焦。然而，我仍然放松了插入符号的位置，我觉得这是一个棘手的问题工作方式(这就是我联系你的原因(。

如何在不丢失的情况下通知更改并更新Root的状态专注于一个输入？

感谢

Answer 1

我的建议

1. 将无状态组件保留为子级
2. 对每个单元格使用关键帧，以避免从父单元格进行不必要的重新绘制