javascript - 如何使用自定义过滤器组件过滤 React 表？

Question

我有一个 React 表 ( https://react-table.js.org )，它由来自 API 的数据填充。在表格上方，我创建了一个过滤器组件，其中包含一个带有多个选项的下拉列表。从下拉列表中选择特定参数后，我需要根据所选参数过滤表格。我把filter组件的状态和table组件的状态分开存储。由于表格和过滤器都是独立的组件，如何从过滤器组件中获取值并过滤表格？我的表格如下:

<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 -->

并且您希望当用户在过滤器组件中进行更改时，表格组件必须反射(reflect)更改。

如果上述情况属实，推荐的方法(不依赖状态管理库)是将状态提升到最小共同祖先 ( see official docs )。

如果您没有最不共同的祖先，请毫不犹豫地介绍一个 container component反而。

该组件应提供以下功能:

• 它知道/存储 FilterComponent 的状态或能够使用来自 FilterComponent 的过滤器指令
• 它以其状态保存数据和过滤数据。 filteredData 可以作为 Props
传递给表格组件
• 每次它从 FilterComponent 获得“应用”过滤器的信号时，它应该过滤数据(导致其状态中的 filteredData 发生变化，这应该使表组件重新呈现)

即在您的 FilterComponent 中，当您单击 Apply 按钮时，内部状态将提升到“容器”组件，这会导致重新计算要显示在您的 TableComponent 中的数据。当数据发生变化时，表格应该重新呈现。

我希望它能打开您的思路，让您了解各种可能性，然后您可以最好地决定哪个组件拥有什么状态和什么职责。