带钩的React-Table失去了对表内部输入的关注？

Question

CodeSandBox：https://codesandbox.io/embed/react-table-editable-content-ggvcy

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

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

编辑：我不小心用了可工作的代码更新了沙箱，尽管它还有另一个错误：How to capture react events during a refresh update due to a focus onBlur change?

Answer 1

问题很隐秘：将“ Cell”渲染道具传递给react-tables时，它将被视为react组件。表示它们将像这样使用：<Cell ... />。 参见https://github.com/tannerlinsley/react-table/blob/v6.9.2/src/utils.js#L208和https://github.com/tannerlinsley/react-table/blob/v6.9.2/src/index.js#L541

这意味着，在每个渲染上，您将创建一个新的 component renderEditable，以便在显示发生更改时，将卸载旧的renderEditable，而将其替换。不幸的是，因为内部输入会失去焦点。

您可以做的是使用旧版本（无钩子），例如：https://github.com/tannerlinsley/react-table/blob/8b07b2c84e0ee29e0ecaa4fe23e96e864ab806a9/archives/v6-examples/react-table-editable-content/src/index.js

或者像这样一直使用钩子：https://github.com/tannerlinsley/react-table/blob/5145a632c944d135863d8a2f14a160a2f9395f61/examples/editable-data/src/App.js

Answer 2

为输入添加自动对焦对我有用。