html - React js材料ui核心表点击从行获取数据

Question

我找到了一个材料表的代码，它接受一个列表作为输入并对其应用分页、排序和过滤。问题是我需要找到一种方法从 onClick 行中提取数据并将页面与这些数据一起重定向到新路由。我怎样才能做到这一点？

在组件中，我按如下方式调用表：

export default function ViewAllUsers() {
     const [filterFn, setFilterFn] = useState({ fn: items => { return items; } })
     const records = ....//List of records
     const {
        TblContainer,
        TblHead,
        TblPagination,
        recordsAfterPagingAndSorting
    } = useTable(records, headCells, filterFn);

    const handleSearch = e => {
        let target = e.target;
        //Handle search
    }

return (
        <>
            <Paper className={classes.pageContent}>
                <Toolbar>
                    <Controls.Input onChange={handleSearch}/>
                </Toolbar>
                <TblContainer>
                    <TblHead />
                    <TableBody>
                        {
                            recordsAfterPagingAndSorting().map(item =>
                            (<TableRow key={item.id}>
                                <TableCell>{item.id}</TableCell>
                                <TableCell>{item.fullName}</TableCell>
                            </TableRow>)
                            )
                        }
                    </TableBody>
                </TblContainer>
                <TblPagination/>
            </Paper>
}

useTable 钩子是：

export default function useTable(records, headCells, filterFn) {
    const pages = [5, 10, 25]
    const [page, setPage] = useState(0)
    const [rowsPerPage, setRowsPerPage] = useState(pages[page])
    const [order, setOrder] = useState()
    const [orderBy, setOrderBy] = useState()

   const TblContainer = props => (
        <Table className={classes.table}>
            {props.children}
        </Table>
    )
    const TblHead = props => {

        const handleSortRequest = cellId => {
           //Some code
        }

        return (<TableHead>
            <TableRow>
                {
                    headCells.map(headCell => (
                        <TableCell key={headCell.id}
                            sortDirection={orderBy === headCell.id ? order : false}>
                            {headCell.disableSorting ? headCell.label :
                                <TableSortLabel
                                    active={orderBy === headCell.id}
                                    direction={orderBy === headCell.id ? order : 'asc'}
                                    onClick={() => { handleSortRequest(headCell.id) }}>
                                    {headCell.label}
                                </TableSortLabel>
                            }
                        </TableCell>))
                }
            </TableRow>
        </TableHead>)
    }

    const TblPagination = () => (
        <TablePagination
            component="div"
            page={page}
            rowsPerPageOptions={pages}
            rowsPerPage={rowsPerPage}
            count={records.length}
            onChangePage={handleChangePage}
            onChangeRowsPerPage={handleChangeRowsPerPage}
            id="TablePagination"
        />
    )

    return {
        TblContainer,
        TblHead,
        TblPagination,
        recordsAfterPagingAndSorting
    }
}

标签： htmlreactjsmaterial-uimaterial-design

Answer 1

您可以简单地使用 onClick 处理程序通过它传递项目数据：

export default function ViewAllUsers() {
     const [filterFn, setFilterFn] = useState({ fn: items => { return items; } })
     const records = ....//List of records
     const {
        TblContainer,
        TblHead,
        TblPagination,
        recordsAfterPagingAndSorting
    } = useTable(records, headCells, filterFn);

    const handleSearch = e => {
        let target = e.target;
        //Handle search
    }

    const handleItemClick = item => {
        //Redirect to new route from here with the item data
    }


    return (
        <>
            <Paper className={classes.pageContent}>
                <Toolbar>
                    <Controls.Input onChange={handleSearch}/>
                </Toolbar>
                <TblContainer>
                    <TblHead />
                    <TableBody>
                        {
                            recordsAfterPagingAndSorting().map(item =>
                            (<TableRow key={item.id} onClick={() => handleItemClick(item)}>
                                <TableCell>{item.id}</TableCell>
                                <TableCell>{item.fullName}</TableCell>
                            </TableRow>)
                            )
                        }
                    </TableBody>
                </TblContainer>
                <TblPagination/>
            </Paper>
         </>
      )
}