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

Question

代码沙盒：https://codesandbox.io/embed/react-table-editable-content-ggvcy

当尝试处理 React-table 中的输入时，我的输入失去了焦点，所以我一次只能输入 1 个字符。

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

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

Answer 1

问题很隐蔽：当您将 "Cell" 渲染道具传递给反应表时，它将被视为反应组件。这意味着他们会这样使用：<Cell ... />。 参见 https://github.com/tannerlinsley/react-table/blob/v6.9.2/src/utils.js#L208 and 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

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