时间戳

首页 > 解决方案 > ReactJS 按钮在点击时改变颜色

reactjs - ReactJS 按钮在点击时改变颜色

问题描述

我在使用Material UI Buttons创建的 reactjs 中有 3 个按钮。

<>
<Button variant="contained">Button 1</Button>
<Button variant="contained">Button 2</Button>
<Button variant="contained">Button3</Button>
</>

当单击一个时，我怎样才能做到这一点，它会改变它的颜色（比如说蓝色），而其他的会重置为默认值？

标签： reactjsmaterial-ui

解决方案

因为 React 使用 JSX，你可以将 javascript 放在你的 html 组件中。我们可以想象一个管理按钮的单一状态。

在您的组件中，您创建一个包含整数的状态

const [buttonSelected, setButtonselected] = useState(0);

我正在使用 react hook 语法，但它也取决于你的实现。

buttonSelected是状态的当前值，setButtonselected是改变状态的函数。当你调用它时，React 会重新渲染你的组件并改变 display 。

您现在可以在退货时添加点击功能

...
<Button variant="contained" onClick={() => setButtonSelected(1)}>Button 1</Button>
<Button variant="contained" onClick={() => setButtonSelected(2)} >Button 2</Button>
<Button variant="contained" onClick={() => setButtonSelected(3)}>Button3 </Button>
...

这将在您每次单击按钮时更改 buttonSelected 的值。

我们现在需要更改颜色，为此我们将使用 makeStyle，但还有其他方法可以做到这一点。

首先，在组件之外创建一个样式元素。

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
            selected: {
                background: 'blue',
            },
            default:{
                background: 'default',
            }
        }
    ),
);

然后在你的组件中调用它

const classes = useStyles();

最后你可以根据值设置你想要的样式

...
<Button className={(buttonSelected === 1) ? classes.selected : classes.default} variant.....
<Button className={(buttonSelected === 2) ? classes.selected : classes.default} variant.....
<Button className={(buttonSelected === 3) ? classes.selected : classes.default} variant.....
...

这是一个三元运算符，相当于

if(buttonSelected === 1){
    return classes.selected
} else {
    return classes.default
}

它应该工作。您可以在react 的条件渲染和 react的样式中了解它

如果您有任何问题，请不要犹豫：）

推荐阅读