Question

我有一个React Table（https://react-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 -->

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

如果以上情况属实，建议的方法（不依赖于状态管理库）将状态提升到最不常见的祖先（see official docs）。

如果您没有最不共同的祖先，请不要犹豫引入container component。

此组件应提供以下功能：

它知道/存储FilterComponent的状态或能够使用FilterComponent的过滤器指令
它包含数据＆amp; filteredData处于其状态。 filteredData可以作为Props
每次从FilterComponent获取信号到＃34;应用＆＃34;一个过滤器，它应该过滤数据（导致在其状态下更改filteredData，这应该使表组件重新呈现）

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

我希望它能够开启你的可能性，然后你可以最好地决定哪个部分掌握了什么状态和什么责任。

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

1 个答案: