Reactjs 用钩子对表进行反应，使表内的输入失去焦点？

代码沙盒：

当试图处理React表中的输入时，我的输入失去焦点，因此一次只能键入1个字符

如何修复渲染周期以允许输入

---

编辑：我不小心用工作版本的代码更新了沙盒，尽管它还有另一个bug：

问题很微妙：当您将“单元”渲染属性传递给react表时，它将被视为react组件。这意味着他们将像这样使用：

。 看到和

这意味着，在每次渲染时，您将创建一个新的组件RenderItable，因此当显示更改时，旧的RenderItable将卸载，新的RenderItable将取代它。这是不幸的，因为内部输入会失去焦点

您可以这样使用旧版本（无挂钩）：

---

或者像这样一直使用钩子：

（很抱歉现在添加了更多的代码和更少的链接，但我需要开始，我可能会在回家后添加更多的内容。但总而言之，答案解释了这个问题并提供了一些提示。）这是一个很好的问题，但在使用钩子的方式时，我的表上也有按钮。onBlur的重新渲染会导致我的表中的按钮错过单击事件。我会尝试让它异步运行，我想知道是什么原因导致这。。。你有没有一个工作的例子让我看一下？实际上这是一个不同但相关的问题，所以我把它放在一个新的问题中：