如何使用自定義過濾器組件過濾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表？

回答

相關問題