Создайте «страницы» шагов с помощью пользовательского интерфейса материала / React Stepper (например, разбиение на таблицы) - PullRequest
Новая
       50

Создайте «страницы» шагов с помощью пользовательского интерфейса материала / React Stepper (например, разбиение на таблицы)

1 голос
/ 14 октября 2019

Используя пользовательский интерфейс материала с React, я пытаюсь создать «страницы» шагов для каждых 4 шагов в процессе.

Приведенная ниже попытка привела к тому, что все 10 шагов все еще показывались в одном представлении, в то время как нумерация страниц рассчитывала правильное количество страниц для каждых 4 шагов. 

return (
    <Grid>
      <Stepper>
        {statusArr.map((label) => {
          return (
            <Step key={label}>
              <StepLabel>{label}</StepLabel>        
            </Step>
          );
        })}
      </Stepper>
      <TablePagination
        component="div"
        count={statusArr.length}
        rowsPerPage={[4]}
        page={page}
        backIconButtonProps={{
          'aria-label': 'previous page',
        }}
        nextIconButtonProps={{
          'aria-label': 'next page',
        }}
        onChangePage={handleChangePage}
      />
    </Grid>
  );

В идеале, я бы хотел, чтобы каждая страницашаги, представленные степперами «точки», показанные здесь , а не внешний вид / функциональность разбивки на таблицы.

Пожалуйста, дайте мне знать, если для контекста требуется дополнительный код, и спасибо за ваши идеи /совет.

1 Ответ

0 голосов
/ 14 октября 2019

Вам просто нужно немного подсчитать, чтобы получить правильное количество страниц 

...
const stepsPerPage = 4;
const pageCount = Math.ceil(statusArray.length / stepsPerPage);

return (
  <Grid>
    <Stepper>
      {Array(pageCount).fill().map(page => (
        <Step>
...
...