Таблица реакции потеряла фокус на фильтре? - PullRequest
Новая
       24

Таблица реакции потеряла фокус на фильтре?

3 голосов
/ 14 апреля 2020

Я делаю базу на реактивном столе v7 и реактивном окне. Я нашел другой вопрос на этом сайте с тем же вопросом, но почти они используют v6 - почти различие.

Проблема в том, что текстовое поле фильтра теряет фокус после ввода текста, и даже когда мы просто касаемся ввода (я знаю, таблица перерисовывается). Но я не могу найти решения в течение нескольких дней.

Пожалуйста, помогите и большое спасибо.

Вот код sanbox

1 Ответ

4 голосов
/ 14 апреля 2020

Вы используете uniqied() для key, т. Е. key={uniqid()}. Поэтому при каждом повторном рендеринге вы создаете новый идентификатор и присваиваете его 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

Рабочая копия кода здесь:

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

Краткое примечание. В приведенном выше коде вы можете использовать уникальное значение, которое остается постоянным на протяжении всего цикла рендеринга. Для демонстрации я использовал индекс.

...