Rus*_*wer 11 reactjs material-ui
所以我明白我可以做一个这样的按钮组，这很棒。
然而，我怎样才能做到这一点，当按下所说的按钮之一时，它看起来像是被选中了呢？因为这一切都是点击效果？
基本上我想做的是，当单击按钮时，它将输入值更改为按钮的值。但我希望该按钮看起来像是已被选中。
<ButtonGroup disableElevation variant="contained" color="primary">
<Button>One</Button>
<Button>Two</Button>
</ButtonGroup>
95f*_*973 14
我会使用状态来跟踪所选内容Button并利用color道具来分配颜色。对于任意颜色，您可以使用 MUIThemeProvider或makeStyles
function App() {
const [selectedBtn, setSelectedBtn] = React.useState(-1);
return(
<div>
<ButtonGroup disableElevation variant="contained" color="primary">
<Button color={selectedBtn === 1 ? "secondary" : "primary"} onClick={()=>setSelectedBtn(1)}>One</Button>
<Button color={selectedBtn === 2 ? "secondary" : "primary"} onClick={()=>setSelectedBtn(2)}>Two</Button>
</ButtonGroup>
</div>
);
}
ReactDOM.render(<App/>, document.getElementById("root"));<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>
<script type="text/babel">
const { ButtonGroup, Button } = MaterialUI;
</script>
</body>小智 11
您可以使用切换按钮 - https://material-ui.com/components/toggle-button。
将其与 ToggleButtonGroup API 结合起来，您就可以开始了 - https://material-ui.com/api/toggle-button-group/#togglebuttongroup-api。
| 归档时间： |
|
| 查看次数： |
10336 次 |
| 最近记录： |