带有钩子的 React-Table 失去了对表内输入的关注? [英] React-Table with hooks looses focus on input inside table?

问题描述

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

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

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

When attempting to handle input into React-table my input is losing focus so i can only type 1 character at a time.

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

How can i fix my render cycle to allow input?

我不小心用代码的工作版本更新了沙箱，尽管它还有另一个错误:如何在刷新更新期间捕获由于焦点在Blur变化上的反应事件?

I accidently updated the sandbox with the working version of code although it has another bug: How to capture react events during a refresh update due to a focus onBlur change?

推荐答案

这个问题非常隐蔽:当你将Cell"渲染道具传递给 react-tables 时，它会被视为一个 react 组件.这意味着他们会像这样使用:.请参阅 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

The issue is quite sneaky: when you pass a "Cell" render prop to react-tables, it'll be treated as a react component. Meaning that they'll use like so: <Cell ... />. See 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

这意味着，在每次渲染时，您将创建一个新的组件 renderEditable，因此当显示发生变化时，旧的 renderEditable 将被卸载，新的将取而代之.这是不幸的，因为内部输入会失去焦点.

What this means, is that at each render you'll create a new component renderEditable so when the display changes, the old renderEditable is unmounted and the new one will take its place. Which is unfortunate because the inner input will loose focus.

您可以做的是使用旧版本(无钩子)，如下所示:https://github.com/tannerlinsley/react-table/blob/8b07b2c84e0ee29e0ecaa4fe23e96e864ab806a9/archives/v6-examples/react-table-editable-/src/index.js

What you can do is either use the old version (no hooks) like so: 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

Or use hooks all the way in like so: https://github.com/tannerlinsley/react-table/blob/5145a632c944d135863d8a2f14a160a2f9395f61/examples/editable-data/src/App.js

这篇关于带有钩子的 React-Table 失去了对表内输入的关注?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！