按列排序表，如何從子項到父項的路徑方法

Question

我使用素材ui下表。

我有三個組成部分：

• EnhancedTableHead（無狀態）
• 表（無狀態）
• EnhancedTable（狀態組件）

在EnhancedTableHead我通過列映射和顯示標籤每個TableCell。

我需要從子EnhancedHead調用onClick來致電EnhancedTable的handleRequestSort。

EnhancedTable

const EnhancedTableHead = props => { 
    const {columns, onSelectAllClick, order, numSelected, totalCount, onRequestSort } = props 

    let createSortHandler = property => event => onRequestSort(event, property) 

    return (
     <TableHead> 
      <TableRow> 
       {columns && <TableCell checkbox> 
        <Checkbox 
         checked={numSelected === totalCount && numSelected } 
         onCheck={onSelectAllClick} 
        /> 
       </TableCell>} 
       {columns && columns.map(({key, label, sortable}) => 
        <TableCell 
         key={key} 
        > 
         <TableSortLabel 
          active={order === key} 
          direction={order} 
          onClick={createSortHandler(key)} 
         > 
          {label} 
         </TableSortLabel> 

        </TableCell> 
       )} 
      </TableRow> 
     </TableHead> 
    ) 
} 

表

const Table = props => { 
    const {data, columns, children, selectable, order, selected, onSelect, onDelete, onSearch, onDuplicate, onSort, search} = props 

    return (
     <div> 
      {selectable && 
       <EnhancedTableToolbar 
        numSelected={selected.length} 
        handleSearch={() => onSearch(data)} 
        value={search} 
        unselectSelected={() => onSelect([])} 
        deleteSelected={() => onDelete(selected)} 
        duplicateSelected={() => onDuplicate([...data, ...selected], [selected])} 
       /> } 
      <MuiTable > 
       {selectable 
        ? <EnhancedTableHead 
         columns={columns} 
         numSelected={selected.length} 
         order={order} 
         totalCount={data.length} 
         onSelectAllClick={() => onSelect(selected.length === data.length ? []: data)} 
         onRequestSort={property => event => onSort(event, property)} 

        /> 
        : <TableHead> 
         <TableRow > 
          {columns.map(({label}) => 
           <TableCell> 
            {label} 
           </TableCell>)} 
         </TableRow> 
        </TableHead> 
       } 
..... 

EnhancedTable

class EnhancedTable extends Component { 
    state = { 
     selected: [], 
     data, 
     order: { 
      direction: 'asc', 
      by: 'deviceID', 
     }, 
     search: '', 
    } 

    handleRequestSort = (event, property) => { 
     const orderBy = property 
     let order = 'desc' 

     if (this.state.order.by === property && this.state.order.direction === 'desc') { 
      order = 'asc' 
     } 

     const data = this.state.data.sort(
      (a, b) => order === 'desc' ? b[orderBy] > a[orderBy] : a[orderBy] > b[orderBy], 
     ) 

     this.setState({ data, order }) 
    } 

    deleteSelected =() => { 
     const {data, selected} = this.state 

     this.setState({data: data.filter(item => !selected.includes(item)), selected: []}) 
    } 

    handleSearch = event => { 
     const {data} = this.state 
     let filteredDatas = [] 
     filteredDatas = data.filter(e => { 
      let mathedItems = Object.values(e) 
      let returnedItems 
      mathedItems.forEach(e => { 
       const regex = new RegExp(event.target.value, 'gi') 
       if (typeof e == 'string') 
        returnedItems = e.match(regex) 
      }) 
      return returnedItems 
     }) 
     this.setState({filterData: filteredDatas, search: event.target.value}) 
    } 

    unselectSelected =() => { 
     this.setState({selected: []}) 
    } 

    duplicate = (data, selected) => { 
     // const {data, selected} = this.state 

     this.setState({ 
      // data: data.filter((item, index) => selected.includes(index)).reduce((p, c) => [...p, {...data[index]}], data), 
      // data : [...data, ...selected], 
      data : data, 
      selected: selected, 
     }) 

    } 

handleSelectChange = selected => { 
    this.setState({selected}) 
} 

    render =() => { 

     const {selected, data, search, order} = this.state 

     return (
      <Paper> 
       <Table 
        data={data} 
        selectable 
        columns={columns} 
        order={order} 
        search={search} 
        selected={selected} 
        onSelect={this.handleSelectChange} 
        onDelete= {this.deleteSelected} 
        onSort={this.handleRequestSort} 
        onDuplicate={this.duplicate} 
        onSearch={this.handleSearch} 
       /> 
      </Paper>) 
    } 
} 
export default EnhancedTable 

Answer 1

EnhancedTable 鍵它的列密鑰，

onClick={() => onRequestSort(key)} 

表 onRequestSort（從EnhancedTable道具）

onRequestSort={key => onSort(key)} 

EnhancedTable

handleRequestSort = key => {...} 
onSort={this.handleRequestSort}