Question

我正在尝试使用功能组件中的react bootstrap table 2实现自定义过滤器，但是当我使用getFilter函数访问过滤器时，setFilter无效并且filter.text保持为null < / p>

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。是否可以那样做并使其起作用？是否有任何变通方法可以在功能组件内部进行编程过滤？

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。根据{{3}}，您可以定义自己的过滤器功能，如下所示：

  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,
    })
  }];

使用功能组件以编程方式过滤，无法获取过滤器-react-bootstrap-table-2

1 个答案: