时间戳

首页 > 解决方案 > 在 ReactJS 中的一行按钮中更改按钮背景颜色

javascript - 在 ReactJS 中的一行按钮中更改按钮背景颜色

问题描述

我为数组的每个项目渲染了 3 个按钮，我希望能够切换按钮的背景颜色。但是，只有一个按钮可以连续更改其背景颜色。

If a button in a row is already clicked and it's background colour is changed, when a new button on that row is selected that button should revert to it's old background colour and the newly clicked one should change it's colour.

这是该问题的堆栈闪电战示例，以及我为尝试解决该问题所做的工作。

标签： javascriptcssreactjs

解决方案

您将有一个保持状态的对象，记住每个人的哪个按钮是活动的。

基本上像这样在你的组件中添加新状态。

const [activeButtons, setActiveButtons] = useState({});

这activeButtons将是类似的{ Alexander: 1, Victoria: 2 }指示。对于 Alexandar - 按钮 1 处于活动状态，对于 Victoria - 按钮 2 处于活动状态。

然后，将您的点击处理程序更改为此

const clickFunc = (name, buttonID) => {
    setActiveButtons({ ...activeButtons, [name]: buttonID });
};

并在所有按钮上像这样使用它

onClick={() => clickFunc(name, 1)}

最后，className像这样控制你

className={activeButtons[name] == 1 ? 'button-clicked' : 'button-unclicked'}

查看此stackblitz以获取完整代码。

推荐阅读