Блог

Я использую react-table библиотеку для создания таблицы с фильтруемыми столбцами. Таблица имеет следующий формат:

 const defaultFilter = [{
  id: 'title',
  value: '',
}];

const ExampleTable = ({ documents, filter = defaultFilter }) => {
  const columns = [
    {
      accessor: 'title',
      filterable: true,
      id: 'title',
      width: 375,
      Cell: props => {
        return (
          <div>
            { props.value }
          </div>
        );
      },
      Filter: ({ filter, onChange }) => (
        <input
          onChange={ event => onChange(event.target.value) }
          style={ { width: '100%' } }
          placeholder={ 'Enter Filter' }
          value={ filter ? filter.value : '' }
        />
      ),
      filterMethod: (filter, row, column) => (row.title.toLowerCase().includes(filter.value.toLowerCase())),
      Header: () => (
        <span>
          Column Header
        </span>
      ),
    }
  ];

  return (
    <ReactTable
      columns={ columns }
      data={ documents } // an array of objects
      manual={ true }
      filtered={ filter }
      onFilteredChange={
        (filteredColumns, value) => {
          Store.updateFilter(filteredColumns);
        }
      }
    />
  );
};
  

Всякий раз, когда я ввожу в элемент ввода, созданный Filter атрибутом моего единственного столбца, выполняется обратный вызов в мое хранилище flux, который обновляет фильтр, который передается обратно в мой компонент таблицы без состояния. Однако после этого конкретного действия ввод фильтра воссоздается, и в результате ввод, следовательно, теряет фокус.

Таким образом, мне пришлось бы вручную возвращать фокус на ввод каждый раз. Может ли быть лучший способ сохранить ссылку на этот ввод, чтобы React не воссоздавал входные данные каждый раз, когда меняются реквизиты?