反应表内部输入在onChange之后失去对自身的引用

Question

我正在使用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属性创建的输入元素时，都会对我的通量存储进行回调，以更新过滤器，并将其传递回我的无状态表组件中。但是，执行此特定操作后，将重新创建过滤器输入，结果该输入将失去焦点。

因此，我每次都必须手动将焦点放回到输入上。也许会有更好的方法来维护对该输入的引用，以便React不会在每次道具更改时重新创建输入？