ReactJS 按钮在点击时改变颜色答案

【问题标题】：ReactJS buttons change color on clickReactJS 按钮在点击时改变颜色
【发布时间】：2020-07-29 20:28:39
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

由于 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
}

它应该可以工作。你可以在the conditional rendering of react 和the styling in react了解它

如果您有任何问题，请不要犹豫:)

【讨论】：