react-table 失去了对过滤器的关注？

Question

我正在制作一个基于 react-table v7 和 react-window 的 table。我在这个网站上发现了其他有同样问题的问题，但几乎他们使用的是 v6 - 几乎不同。

问题是过滤文本字段会在我们键入后失去焦点，即使我们只是触摸输入（我知道 table 正在重新呈现）。但是我几天都找不到任何解决方案。

请帮忙，非常感谢。

Answer 1

您正在使用 uniqied() 作为 key，即 key={uniqid()}。因此，在每次重新渲染时，您都会创建一个新 ID 并将其分配给 key。当 key 属性改变时，组件不会重新渲染，而是重新挂载。因此失去焦点。

下面应该可行。

<div {...getTableProps()} className={css.table} style={{ ...styles }}>
          <div className={css.thead}>
            {headerGroups.map((headerGroup, index) => (
              <div
                key={index}
                {...headerGroup.getHeaderGroupProps()}
                className={css.heading + " " + css.tr}
              >
                {headerGroup.headers.map((column, i) => (
                  <div
                    key={i}
                    className={
                      css.th + " " + (column.fixedWidth ? css.fixed__width : "")
                    }
                    style={{ ...getCellStyles(column) }}
                  >
                    <div className={css.th__inner}>
                      <div {...column.getHeaderProps()}>
                        <div

代码的工作副本在这里：

https://codesandbox.io/s/table-key-issue-bpkly

快速说明 - 在上面的代码中，您可以使用在整个渲染周期中保持不变的唯一值。为了演示，我使用了 index.

react-table 失去了对过滤器的关注？

react-table lost focus on filter?

javascript

reactjs

react-table

react-window