时间戳

首页 > 解决方案 > Material UI - 步进步骤内的按钮

reactjs - Material UI - 步进步骤内的按钮

问题描述

我想在 Material UI 的步进器的一个步骤中有一个可点击的元素。该元素应始终可见，而不仅仅是在步骤处于活动状态时可见。由于 UX 原因，无法将所有步骤设置为活动状态。

这是我尝试过的：

<Step key={x.id}>
    <StepButton completed={false} onClick={() => xxx()}>
        {title}
    </StepButton>
    <div style={{ display: "flex", justifyContent: "center" }}>
        <IconButton onClick={(e) => show()}>
            <InfoIcon />
        </IconButton>
    </div>
</Step>

但似乎不允许在步骤中包含 div。我在 div 的行中遇到错误（例如警告：收到true非布尔属性激活。）

然后我尝试将图标放在 StepButton 标记中：

<Step key={x.id}>
    <StepButton completed={false} onClick={() => xxx()}>
        {title}
        <IconButton onClick={(e) => show()}>
            <InfoIcon />
        </IconButton>
    </StepButton>
</Step>

但这也是不可能的，因为 Buttons 中的 Buttons 是不允许的。

有没有其他方法可以在一个步骤中使用可点击元素（如 IconButton）？

标签： reactjsmaterial-uistepper

解决方案

您可以在 StepLabel 中放置一个按钮：

import { Step, StepLabel, StepContent, Button } from "@material-ui/core";

像这样放置：

<Step key={x.id}>
    <StepLabel
        onClick={() => handleStep(x.id)}
        completed={completed}
    >
        {title}
        <Button
            onClick={(e)=>{
            console.log("Button Pressed")}
            }
        >
            {"Button"}
        </Button>
    </StepLabel>
    <StepContent>
        {"Content hidden when not active"}
    </StepContent>
</Step>

如果要阻止按钮打开步骤，可以添加一个e.stopPropagation()

推荐阅读