获取过滤数据，react-bootstrap-table2

Question

是否有任何返回过滤行的全局表选项？ 忽略分页。 匹配一个或多个textFilter所有行？

我需要标题中的值显示过滤数据的平均值。

我在https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html上找不到任何内容

有onDataSizeChange ，但它只提供道具dataSize （行数），也仅在不使用分页时可用。

更新评论中的第二个问题：

class App extends Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);

    this.state = {
      data: [...]
      filtredData: null
    };
  };

  const factory = patchFilterFactory(filterFactory, (filteredData) => {
     this.setState({filteredData}); // causes maximum update exceeded..
  });

  render() {
    return (
      <div>
         <BootstrapTable
          keyField='id'
          striped
          hover
          bootstrap4
          data={anbuds}
          filter={factory()}
          columns={columns}/>
      </div>
    );
  }
}

Answer 1

有点。

您可以这样做的一种方法是提供过滤器道具的不同实现，并在那里获取您需要的数据。

import BootstrapTable from "react-bootstrap-table-next";
import filterFactory, { textFilter } from "react-bootstrap-table2-filter";

function patchFilterFactory(filterFactory, onFilteredData) {
  return (...args) => {
    const { createContext, options } = filterFactory(...args)
    return {
      createContext: (...args) => {
        const { Provider: BaseProvider, Consumer } = createContext(...args)
        const Provider = class FilterProvider extends BaseProvider {
          componentDidUpdate() {
            onFilteredData(this.data)
          }
        }
        return { Provider, Consumer } 
      },
      options
    }
  }
}

patchFilterFactory将位于原始过滤器提供程序和您的代码之间，允许您获取所需的数据。

如何使用它：

function Table() {
  const columns = [
    {
      dataField: "id",
      text: "Product ID"
    },
    {
      dataField: "name",
      text: "Product Name",
      filter: textFilter({
        delay: 0
      })
    },
    {
      dataField: "price",
      text: "Product Price",
      filter: textFilter({
        delay: 0
      })
    }
  ];

  const factory = patchFilterFactory(filterFactory, (filteredData) => {
    console.log('on filter data', filteredData)
  })

  return (
      <BootstrapTable
        keyField="id"
        data={props.products}
        columns={columns}
        filter={factory()}
      />
  );
}

我同意，这远非理想，但据我评估，这可能是目前唯一的方法。

如果您想更改同一组件中的状态，我建议：

  const [filteredData, setFilteredData] = React.useState([])

  const factory = patchFilterFactory(filterFactory, data => {
    setFilteredData(prevData => {
      if (JSON.stringify(prevData) !== JSON.stringify(data)) {
        return data
      }

      return prevData
    })
  })

Answer 2

我的 2¢：经过一些调查（并有意避免实现@federkun 建议的过滤器工厂包装器），我发现我可以访问呈现表的当前过滤器上下文。

为了访问表属性，我必须添加React Ref ：

class MyDataTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: props.data
    };
    this.node = React.createRef();
  }

  ...

  render() {
    return (
      <Card>
        <CardBody>
          <BootstrapTable
            ref={n => this.node = n}
            keyField="id"
            data={this.state.data}
            ...
          />
          <Button name="click-me" onClick={() => this.handleClick()}>Click me!</Button>
        </CardBody>
      </Card>
    )
  }
}

现在，当可以使用this.node从代码中引用<BootstrapTable> ，我可以获得所有过滤数据（无需分页）：

  // member of MyDataTable component
  handleClick() {
    console.log(this.node.filterContext.data);
  }

请注意，如果您以这种方式访问​​数据，条目将不会按照您在表中看到的方式进行排序，因此如果您真的想发疯，您可以通过这种方式过滤和排序数据：

  // member of MyDataTable component
  handleClick() {
    const table = this.node;
    const currentDataView =
      (table.paginationContext && table.paginationContext.props.data)
      || (table.sortContext && table.sortContext.props.data) // <- .props.data (!)
      || (table.filterContext && table.filterContext.data) // <- .data (!)
      || this.state.data; // <- fallback

    console.log(currentDataView);
  }

......但是这变得非常疯狂。 这里重要的事情是从paginationContext开始 - 在它已经被切成页面之前的任何东西。 你可以在这里检查上下文是如何组合在一起的： react-bootstrap-table2/src/contexts/index.js 。

然而，这种方法是hacky - 完全避免公共API，拦截上下文管道，读取每一层的输入。 在较新的版本中情况可能会发生变化，或者这种方法可能存在我尚未发现的问题 - 请注意这一点。