如何在react中的不同按钮上添加"active“类onClick
如何在react中的不同按钮上添加"active“类onClick
提问于 2019-03-26 22:11:30
我有两个不同的按钮，我正试图在React中添加活动类，但on click同时添加到了这两个按钮中。活动类的背景是白色的。初始类的背景为蓝色。这是我的代码。
import React, { PureComponent } from "react";
class AnimationSettings extends PureComponent {
constructor(props) {
super(props);
this.state = {
active: true
};
}
handleClick = () => {
this.setState({ active: !this.state.active });
};
render() {
const { active } = this.state;
console.log(active);
return (
<div className="animation-buttons">
/}
<button
onClick={this.handleClick}
className={active ? "btn-animation" : "active-animation"}
>
On
</button>
<button
onClick={this.handleClick}
className={active ? "btn-animation" : "active-animation"}
>
Off
</button>
</div>
);
}
}
export default AnimationSettings;回答 3
Stack Overflow用户
发布于 2019-03-26 22:17:21
一种方法是为每个按钮保持一个单独的状态变量。
示例
class AnimationSettings extends React.PureComponent {
state = {
isFirstActive: false,
isSecondActive: false
};
handleFirstClick = () => {
this.setState(({ isFirstActive }) => ({ isFirstActive: !isFirstActive }));
};
handleSecondClick = () => {
this.setState(({ isSecondActive }) => ({
isSecondActive: !isSecondActive
}));
};
render() {
const { isFirstActive, isSecondActive } = this.state;
return (
<div className="animation-buttons">
<button
onClick={this.handleFirstClick}
className={isFirstActive ? "btn-animation" : "active-animation"}
>
On {isFirstActive && "(active)"}
</button>
<button
onClick={this.handleSecondClick}
className={isSecondActive ? "btn-animation" : "active-animation"}
>
Off {isSecondActive && "(active)"}
</button>
</div>
);
}
}
ReactDOM.render(<AnimationSettings />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Stack Overflow用户
发布于 2019-03-26 22:44:20
这是一个可行的解决方案，
class AnimationSettings extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
active: true,
buttonIdsArray: ["button1", "button2"]
};
}
componentDidMount() {
this.initButton();
}
initButton = () => {
this.state.buttonIdsArray.forEach(button => {
document.getElementById(button).classList.remove("active-button");
document.getElementById(button).classList.add("inactive-button");
});
};
handleClick = id => {
this.initButton();
document.getElementById(id).classList.add("active-button");
document.getElementById(id).classList.remove("inactive-button");
this.setState({ active: !this.state.active });
};
render() {
const { active } = this.state.active;
console.log(active);
return (
<div className="animation-buttons">
<button
id="button1"
onClick={() => this.handleClick("button1")}
className={active ? "btn-animation" : "active-animation"}
>
On
</button>
<button
id="button2"
onClick={() => this.handleClick("button2")}
className={active ? "btn-animation" : "active-animation"}
>
Off
</button>
</div>
);
}
}
ReactDOM.render(<AnimationSettings />, document.getElementById("root"));.active-button {
background-color: #fff;
}
.inactive-button {
background-color: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
我希望它能有所帮助！
Stack Overflow用户
发布于 2019-03-26 22:23:33
如果这两个按钮不应同时处于活动状态，则可以更改条件：
在以下位置：
active ? "btn-animation" : "active-animation"关闭：
!active ? "btn-animation" : "active-animation"页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55359249
复制相关文章
相似问题
腾讯云开发者
