#javascript #reactjs #pagination #material-ui
Вопрос:
Я следовал примеру в отношении material-ui TablePagination
, который они имеют в качестве useTable
компонента и имеют следующий код:
import React, { useState } from 'react'
import { Table, TableHead, TableRow, TableCell, makeStyles, TablePagination, TableSortLabel } from '@material-ui/core'
const useStyles = makeStyles(theme => ({
table: {
marginTop: theme.spacing(1),
'amp; thead th': {
fontWeight: '800',
backgroundColor: '#e0e0e0',
color: '#000'
},
'amp; tbody td': {
fontWeight: '500',
},
'amp; tbody tr:hover': {
backgroundColor: '#bee8fd',
cursor: 'pointer',
},
minWidth: 650
},
}))
export default function useTable(records, filterFn) {
const classes = useStyles();
const pages = [5, 10, 25, 50, 75, 100]
const [page, setPage] = useState(0)
const [rowsPerPage, setRowsPerPage] = useState(pages[page])
const [order, setOrder] = useState()
const [orderBy, setOrderBy] = useState()
const handleChangePage = (event, newPage) => {
setPage(newPage);
}
const handleChangeRowsPerPage = event => {
setRowsPerPage(parseInt(event.target.value, 10))
setPage(0);
}
const TblPagination = () => (<TablePagination
component="div"
page={page}
rowsPerPageOptions={pages}
rowsPerPage={rowsPerPage}
count={records.length}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>)
const recordsAfterPagingAndSorting = () => {
return stableSort(filterFn.fn(records), getComparator(order, orderBy))
.slice(page * rowsPerPage, (page 1) * rowsPerPage)
}
return {
TblPagination,
recordsAfterPagingAndSorting
}
}
В рамках другого вызываемого компонента JobReport.js
я импортирую этот useTable
компонент следующим образом
import useTable from "./useTable";
и в нижней части моего отчета я вызываю компонент <TblPagination />
, который возвращается из useTable.js
Мой вопрос в том, что на данный момент в пределах useTable.js
rowsPerPage
установлено значение 5 в зависимости от значения состояния. Чего я хотел бы добиться, так это предоставить этому useTable.js
компоненту динамическое значение из любого другого компонента, использующего его, чтобы установить страницу строки этого компонента.
Таким образом, внутри ComponentA.js
у меня может быть отчет, в котором я хочу установить значение по умолчанию rowPerPage
10, а в другом компоненте я могу установить значение по умолчанию для этого отчета 50, но оба по-прежнему вызывают useTable.js
компонент.
Я думал, что смогу передать это как опору <TblPagination page={3}/>
, чтобы вернуть 50, но это не сработало.
С помощью этой настройки могу ли я в любом случае установить для своих строк значение по умолчанию 50 в пределах <TblPagination />
Я на самом деле использую useTable.js это несколько разных компонентов, и вы хотите иметь возможность изменять страницу строк на разные значения для этих разных компонентов.
Если я изменю его, useTable.js
то все компоненты, вызывающие его, будут иметь по умолчанию 50 строк, а это не то, что я хочу.
Комментарии:
1. как вы визуализируете TblPagination в других компонентах ?
2. @Shyam — как упоминалось в моем вопросе — я просто вызываю компонент
<TblPagination />
в нижней части своего отчета.3. можете ли вы попробовать назвать его так
{TblPagination(50)}
, и в вашем удобном крючке вы сможете получить к нему доступ какconst TblPagination = (rowsPerPage)
Ответ №1:
ОБНОВЛЕНИЕ: дайте возможность компоненту, использующему этот крючок, определить, сколько строк на странице. Если не определено, установите значение по умолчанию 50.
export default function useTable(records, filterFn, customRowsPerPage) {
//..
const [rowsPerPage, setRowsPerPage] = useState(customRowsPerPage || 50)
//..
}
Вместо:
const [rowsPerPage, setRowsPerPage] = useState(pages[page])
Установите значение по умолчанию 50:
const [rowsPerPage, setRowsPerPage] = useState(50)
Комментарии:
1. Я понял это, но на самом деле я использую
useTable.js
несколько разных компонентов и хочу иметь возможность изменять значенияrowsPerPage
для разных компонентов. Если я изменю его,useTable.js
то все компоненты, вызывающие его, будут иметь по умолчанию 50 строк, а это не то, что я хочу. Надеюсь, в этом есть смысл.2. «Мой вопрос в том, что в данный момент в useTable.js для страницы строк установлено значение 5 в зависимости от значения состояния. На самом деле я хочу, чтобы в этом отчете по умолчанию была строка 50». и поэтому я догадался, что это ваша проблема. Если ваш вопрос не имеет значения по умолчанию 50, но имеет более динамичное значение для страницы строк, пожалуйста, отредактируйте свой вопрос.
3. Я отредактировал свой ответ. Пожалуйста, проверьте, правильно ли это понято
4. Вопрос был отредактирован, чтобы точно отразить то, что мне нужно, и это динамическое значение для
rowsPerPage
5. Ваше решение дать компоненту возможность принимать динамическое значение сделало свое дело.