Question

我使用React Table（https://react-table.js.org）来填充包含来自API调用的数据的表。现在我想过滤表中的两列。我已经实现了一个过滤器组件，它允许用户选择过滤器选项并更新状态。我的问题是如何链接这两个组件？当我单击我的过滤器组件上的“应用”按钮时，该表必须仅显示与过滤条件匹配的列。我知道React Table（https://react-table.js.org)provides一些API来监听回调以进行过滤，但我无法实现。此外，两个组件都存在于同一个js文件中，并且没有父组件。是否应该有共同的父组件？我更喜欢在本地管理状态而不使用任何状态管理库。我没有使用Redux，那么用本地状态管理实现过滤功能的最佳方法是什么？

这是我的州职能：

    const makeDefaultState = () => ({
      Name: "",
      ID: "",
      IdMenu: '',
      NameMenu: '',
      filtered: [],
      open: false,
    });

设置下拉列表状态的回调函数：

    getIdMenu = (IdMenu) => {
      console.log(IdMenu);
      this.setState({ IdMenu });
     }

   getNameMenu = (NameMenu) => {
     console.log(NameMenu);
     this.setState({ NameMenu });
    }

我的表组件如下：

     <ReactTable
data={tableData}
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: "Name",
        accessor: "Name",
        id: "Name",
        headerStyle: {
          background: '#ECEFF1',
        },
      },
 </ReactTable>

下拉过滤器组件如下：

     <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.NameMenu}
              rightIcon={<ArrowDropRight />}
              menuItems={[
                <MenuItem 
                  primaryText="OPTION 1" 
                  onClick={() =>
                this.getNameMenu('OPTION 1')
              }
                />,
                <Divider />,
                <MenuItem primaryText="OPTION 2"
                  onClick={() =>
                    this.getNameMenu('OPTION 2')
              }
                />,
              ]}
          />

          <Divider />

          <MenuItem
              primaryText={"ID -   " + this.state.IdMenu}
              rightIcon={<ArrowDropRight />}
              menuItemStyle={{ backgroundcolor: '#E0F2F1' }}
              menuItems={[
                <MenuItem primaryText="1" onClick={() =>
                this.getIdMenu('1')
              }
                />,
                <Divider />,
                <MenuItem primaryText="2" onClick={() =>
                this.getIdMenu('2')
              }
                />,
          <RaisedButton
              label="APPLY"
              style={{ margin: 2, width: '60px' }}
              labelColor="#FAFAFA"
              backgroundColor="#26A69A"
              onClick={() => 
              }
          />
          <RaisedButton
              label="CANCEL"
              style={{ margin: 22, width: '60px' }}
              labelColor="#26A69A"
              onClick={() =>
                this.resetState()
            }
          />

如何使用过滤器组件触发React Table上的过滤？

0 个答案: