文章/答案/技术大牛

发布

社区首页 >问答首页 >使用Material UI/React Stepper创建步骤的“页面”(如表格分页)

问使用Material UI/React Stepper创建步骤的“页面”(如表格分页)
EN

Stack Overflow用户

提问于 2019-10-15 00:01:01

回答 1查看 320关注 0票数 1

使用React的材料UI，我尝试为流程中的每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>
  );

理想情况下，我应该让Stepper "dots“表示的每一页步骤都显示为here，而不是表格的分页外观/功能。

如果上下文需要额外的代码，请让我知道，并感谢您的想法/建议。

pagination

material-ui

uistepper

javascript

reactjs

Stack Overflow用户

发布于 2019-10-15 02:44:10

你只需要做一些数学运算就可以得到正确的页数

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

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

票数 0

查看全部 1 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58380316

复制

相似问题

问使用Material UI/React Stepper创建步骤的“页面”(如表格分页)
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Material UI/React Stepper创建步骤的“页面”(如表格分页)EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Material UI/React Stepper创建步骤的“页面”(如表格分页)
EN