如何使用自定义过滤器组件过滤反应表

Question

我有一个反应表（https://reaect-table.js.org），该表从来自API的数据中填充。在表上方，我创建了一个过滤器组件，该滤波器由带有多个选项的下拉列表组成。一旦从下拉列表中选择了特定参数，我需要根据所选参数过滤表。我分别存储过滤器组件的状态和表组件的状态。由于表和过滤器都是单独的组件，因此如何从过滤器组件中获取值并过滤表？我的桌子如下：

<ReactTable
data={tableData}
noDataText="No Appointments"
loading={this.props.loading}
showPagination={false}
filterable
defaultFilterMethod={(filter, row) =>
  String(row[filter.id]) === filter.value}
columns={[
  {
    columns: [
      {
        sortable: false,
        filterable: false,
        Header: "Id",
        accessor: "resourceId",
        headerStyle: {
          background: '#ECEFF1',
        },
      },
      {
        sortable: false,
        filterable: false,
        Header: "Tenant Name",
        accessor: "Name",
        id: "Tenant Name",
        headerStyle: {
          background: '#ECEFF1',
        },
      },
 </ReactTable>

我的过滤器组件如下：

export default class PopoverExampleAnimation extends 
React.Component {
constructor(props) {
super(props);
this.state = {
  open: false,
  clicked: [],
  Id: '',
  tenantName: '',
};
this.handleRequestClose = this.handleRequestClose.bind(this);
this.getId = this.getId.bind(this);
this.getTenantName = this.getTenantName.bind(this);
}
handleTouchTap = (event) => {
// This prevents ghost click.
 event.preventDefault();
this.setState({
  open: true,
  anchorEl: event.currentTarget,
  });
 };
handleRequestClose = () => {
  this.setState({
  open: false,
  });
 };
getId = (Id) => {
    console.log(Id);
    this.setState({Id});
}
getTenantName = (tenantName) => {
 console.log(tenantName);
this.setState({tenantName});
}
render() {
return (
  <div>
    <RaisedButton
        onClick={this.handleTouchTap}
        label="FILTER"
        labelColor="#26A69A"
    />
    <Popover
        open={this.state.open}
        anchorEl={this.state.anchorEl}
        anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
        targetOrigin={{ horizontal: 'left', vertical: 'top' }}
        onRequestClose={this.handleRequestClose}
        animation={PopoverAnimationVertical}
    >
      <Menu>
        <MenuItem
            primaryText={"NAME - " + this.state.tenantName}
            rightIcon={<ArrowDropRight />}
            menuItems={[
              <MenuItem 
              primaryText="Group 1" 
              onClick={() =>
                this.getTenantName('Group 1')
              }
              />,
              <Divider />,
              <MenuItem primaryText="Group 2"
              onClick={() =>
                this.getTenantName('Group 2')
              }
              />,
            ]}
        />
        <Divider />
        <MenuItem
            primaryText={"ID -   " + this.state.Id}
            rightIcon={<ArrowDropRight />}
            menuItemStyle={{ backgroundcolor: '#E0F2F1' }}
            menuItems={[
              <MenuItem primaryText="1" onClick={() =>
                this.getId('1')
              }
              />,
              <Divider />,
              <MenuItem primaryText="2" onClick={() =>
                this.getId('2')
              }
              />,
              <Divider />,
              <MenuItem primaryText="3" onClick={() =>
                this.getId('3')
              }
              />,
              <Divider />,
              <MenuItem primaryText="4" onClick={() =>
                this.getId('4')
              }
              />,
            ]}
        />
        <Divider />
        <RaisedButton
            label="APPLY"
            style={{ margin: 2, width: '60px' }}
            labelColor="#FAFAFA"
            backgroundColor="#26A69A"
        />
        <RaisedButton
            label="CANCEL"
            style={{ margin: 22, width: '60px' }}
            labelColor="#26A69A"
            onClick={() =>
              //this.getId(' ')
              this.handleRequestClose()
             }
        />
      </Menu>
    </Popover>
  </div>
  );
 }
}

表和过滤器都是单独的组件，我没有使用Redux进行状态管理。

Answer 1

我对您的设置的理解，您有：

<FilterComponent /> <!-- Stores instructions for Filters to apply -->
<TableComponent /> <!-- Displays data -->

您希望，当用户对过滤器组件进行更改时，表组件必须反映更改。

如果以上是正确的，则建议这样做的推荐方法（不依赖州管理库）将国家提升到最少共同的祖先（请参阅官方文档）。

如果您没有至少共同的祖先，请不要犹豫地引入容器组件。

此组件应提供以下功能：

• 它知道/存储FilterComponent的状态或能够从FilterComponent中使用过滤器指令
• 它拥有数据＆amp;在其状态下过滤。FilteredData可以以Props
的形式传递到表组件
• 每当它从FilterComponent获得"应用"过滤器的信号时，它应该过滤数据（导致其状态中的FilterData变化，这应该使表组件重新呈现）
）

即。在您的FilterComponent中，当您单击"应用"按钮时，将内部状态抬起到"容器"组件，并导致将要在tablecomponent中显示的数据重新计算。当数据更改时，表应重新渲染。

我希望它能为您的可能性打开思想，然后您可以最好地确定哪个组件承担着哪些状态和哪些责任。