反应表失去对过滤器的关注？

Question

我正在基于react-table v7和react-window创建一个表。我在该站点上发现了另一个与相同问题有关的问题，但几乎他们正在使用v6-几乎有所不同。

问题是过滤器文本字段在我们键入后甚至当我们仅触摸输入时也会失去焦点（我知道表是重新渲染的）。但是我几天都找不到任何解决方案。

请提供帮助，非常感谢。

Here is the code sanbox

Answer 1

您正在将uniqied()用于key，即key={uniqid()}。因此，在每次重新渲染时，您都在创建一个新的ID，并将其分配给key。当key prop更改时，不会重新渲染组件，但是会重新安装它。因此失去了焦点。

下面应该起作用。

<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