代码沙盒: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?
最佳答案
这个问题非常狡猾:当您将“Cell”渲染 Prop 传递给 react 表时，它将被视为 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 将被卸载，新的 renderEditable 将取而代之。这是不幸的，因为内部输入会失去焦点。
您可以做的是使用旧版本(无 Hook )，如下所示:https://github.com/tannerlinsley/react-table/blob/8b07b2c84e0ee29e0ecaa4fe23e96e864ab806a9/archives/v6-examples/react-table-editable-content/src/index.js
或者像这样一直使用钩子(Hook):https://github.com/tannerlinsley/react-table/blob/5145a632c944d135863d8a2f14a160a2f9395f61/examples/editable-data/src/App.js
关于reactjs - 带有钩子(Hook)的 React-Table 失去了对表内输入的关注？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57419197/