Question

我在下一张表中使用了材料。

我有三个组成部分：

EnhancedTableHead（无国籍）
表（无国籍）
EnhancedTable（有状态组件）

在EnhancedTableHead中，我映射列并显示每个TableCell的标签。

我需要从孩子onClick调用EnhancedHead来致电EnhancedTable的{{1}}。

EnhancedTable

handleRequestSort

表

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

EnhancedTable

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>
                }
.....

Answer 1

<强> EnhancedTable 键入它的列键，

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

表格 onRequestSort（来自EnhancedTable的道具）

onRequestSort={key => onSort(key)}

<强> EnhancedTable

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

按列排序表，如何从子到父路径的路径

1 个答案: