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

我有一个React Table（https://react-table.js.org），它来自API中的数据。在表格上方，我创建了一个过滤器组件，其中包含具有多个选项的下拉菜单。一旦从下拉列表中选择了特定的参数，我需要根据所选参数过滤表格。我分别存储过滤器组件的状态和表组件的状态。由于表和过滤器都是独立的组件，因此如何从过滤器组件获取值并过滤表？我的表如下：如何使用自定义过滤器组件过滤React表？

<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> 
); 
} 
}

两者表和过滤是单独的部件和Im不使用Redux的状态管理。

来源

2017-10-05 SeaWarrior404

“我没有使用Redux进行状态管理”：为什么不呢？这是你的问题最明显的解决方案。 – JulienD

@JulienD不一定。 Redux非常棒，但并非[必须]（https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367）。如果他/她需要在组件之间进行通信的唯一情况[提升状态]（https://reactjs.org/docs/lifting-state-up.html）也是一个有效选项。 – dubes

我你的设置的了解，您有：

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

，你希望的是，当用户在该过滤元件的变化，表组件必须反映这些变化。

如果上述属实，推荐的方式这样做（不依靠状态管理库）被解除的状态到至少共同祖先（see official docs）。

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

这个组件应该成为下面的函数：

它知道/存储FilterComponent 或的状态是能够从FilterComponent消耗滤波器指令
它保持数据& filteredData在其状态。 filteredData可以传递给表组件Props
每次从FilterComponent获取一个信号以“应用”一个过滤器时，它应该过滤数据（导致过滤数据在其状态中发生变化，这应该使表组件重新生成-render）

即在您的FilterComponent中，当您单击应用按钮时，内部状态被提升到“容器”组件，并导致重新计算要显示在TableComponent中的数据。数据更改时，表格应该重新呈现。

我希望它打开了你的想法的可能性，然后你可以最好地决定哪个组件持有什么状态和什么责任。

来源

2017-10-05 13:59:41 dubes

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

回答

相关问题