如何使用自定义过滤器组件过滤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的状态管理。
答
我你的设置的了解,您有:
<FilterComponent /> <!-- Stores instructions for Filters to apply -->
<TableComponent /> <!-- Displays data -->
,你希望的是,当用户在该过滤元件的变化,表组件必须反映这些变化。
如果上述属实,推荐的方式这样做(不依靠状态管理库)被解除的状态到至少共同祖先(see official docs)。
如果你没有最少的共同祖先,请不要犹豫,而是引入container component。
这个组件应该成为下面的函数:
- 它知道/存储FilterComponent 或的状态是能够从FilterComponent消耗滤波器指令
- 它保持数据& filteredData在其状态。 filteredData可以传递给表组件
Props
- 每次从FilterComponent获取一个信号以“应用”一个过滤器时,它应该过滤数据(导致过滤数据在其状态中发生变化,这应该使表组件重新生成-render)
即在您的FilterComponent中,当您单击应用按钮时,内部状态被提升到“容器”组件,并导致重新计算要显示在TableComponent中的数据。数据更改时,表格应该重新呈现。
我希望它打开了你的想法的可能性,然后你可以最好地决定哪个组件持有什么状态和什么责任。
“我没有使用Redux进行状态管理”:为什么不呢?这是你的问题最明显的解决方案。 – JulienD
@JulienD不一定。 Redux非常棒,但并非[必须](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367)。如果他/她需要在组件之间进行通信的唯一情况[提升状态](https://reactjs.org/docs/lifting-state-up.html)也是一个有效选项。 – dubes