使用函数组件以编程方式过滤，无法获取Filter - react-bootstrap-table-2

Question

我试图在一个函数组件中使用react bootstrap table 2实现一个自定义过滤器，但是当我使用getFilter函数访问该过滤器时，setFilter不起作用，filter.text仍然为空

const ExempleTable = () => {
  const [filter, setFilter] = useState({ text: null });

  const columns = [{
    dataField: 'text',
    text: 'Text',
    filter: textFilter({
      getFilter: (textFilter) => setFilter({ text: textFilter }),
    })
  }];

  const setTextFilter = (e) => filter.text && filter.text(e.currentTarget.value);

  return (
    <>
      <input onChange={setTextFilter} />
      <BootstrapTable
        filter={filterFactory()}
        data={[{ text: "Je suis un test"}]}
        columns={columns}
      />
    </> 
  );
}

在这里，即使在setFilter之后，filter.text也始终为null。有没有可能这样做并让它工作呢？有没有办法在function组件中以编程方式进行筛选？

Answer 1

据我所知，getFilter旨在获得对react-bootstrap-table-2，实现的过滤器的访问权限，而不是覆盖它。所以，如果你这样做：

const columns = [{
    dataField: 'text',
    text: 'Text',
    filter: textFilter({
      getFilter: (textFilter) => { this.setFilter = textFilter; },
    })
  }];

然后，您可以稍后使用此setFilter函数以编程方式设置列过滤器，方法是像这样调用该函数：

invokeFilterFunction = (e) => {
    this.setFilter(e.currentTarget.value);
}

return (
  <>
    <input onChange={invokeFilterFunction} />
    <BootstrapTable
      filter={filterFactory()}
      data={[{ text: "Je suis un test"}]}
      columns={columns}
    />
  </> 
  );

如果您想覆盖列过滤函数，我认为您应该使用onFilter。根据Storybook，您可以定义自己的过滤函数，如下所示：

  myOwnFirstFilter = (filterVal, data) => {
    if (filterVal) {
      return data.filter(text => text && text.indexOf(filterVal) !== -1);
    }
    return data;
  }

然后，在列中设置过滤器，如下所示：

const columns = [{
    dataField: 'text',
    text: 'Text',
    filter: textFilter({
      onFilter: this.myOwnFirstFilter,
    })
  }];