CodeSandBox：https ://codesandbox.io/embed/react-table-editable-content-ggvcy
当尝试处理 React-table 的输入时，我的输入失去焦点，所以我一次只能输入 1 个字符。
如何修复渲染周期以允许输入？
编辑：我不小心用代码的工作版本更新了沙箱，尽管它有另一个错误：如何在刷新更新期间捕获react事件由于焦点在模糊变化？
带有钩子的 React-Table 失去了对表内输入的关注？
IT技术
reactjs
react-hooks
react-table
2021-04-30 17:26:28
2个回答
这个问题非常狡猾：当您将“Cell”渲染props传递给 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
这意味着，在每次渲染时，您将创建一个新组件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
将 autoFocus 添加到输入中对我有用。