在react中单击按钮时在多个按钮样式之间切换

Question

我想在单击按钮时更改按钮的样式。

下面是我的文件。

App.js:

class Test extends Component {
constructor(){
super();
this.state = {
black: true
}
}
changeColor(){
this.setState({black: !this.state.black})
}
render(){
let btn_class1 = this.state.black ? "blackButton" : "whiteButton";
let btn_class2 = this.state.black ? "whiteButton" : "blackButton";
let btn_class3 = this.state.black ? "whiteButton" : "blackButton";
return (
<div>
<button className={btn_class1}
onClick={this.changeColor.bind(this)}>
Button1
</button>
<button className={btn_class2}
onClick={this.changeColor.bind(this)}>
Button2
</button>
<button className={btn_class3}
onClick={this.changeColor.bind(this)}>
Button3
</button>
</div>
)
}
}
export default App;

color.css:

button{
width: 80px;
height: 40px;
margin: 15px;
}
.blackButton{
background-color: black;
color: white;
}
.whiteButton{
background-color: white;
color: black;
}

一开始，我希望我的纽扣1有黑色背景，纽扣2和纽扣3应该有白色背景。

当我点击按钮2时，它应该有黑色背景，按钮1和按钮3应该有白色背景。

与按钮3类似：当点击时，它应该有一个黑色背景，按钮1和按钮2应该变为白色背景。

Answer 1

METHOD 1
一个简单的方法是保持一个包含暗按钮名称的状态，因为一次只有一个按钮是暗的，然后在按钮的链接上将btn名称传递给一个函数，该函数用该按钮名称设置该状态。它将保留暗按钮的名称
然后通过比较暗按钮的当前状态将className添加到btns

class Test extends Component {
constructor() {
super();
this.state = {
darkBtn: "btn1"
};
}
changeColor = (btn) => {
this.setState({ darkBtn: btn });
};
addDarkClass = (btn) => {
if (this.state.darkBtn === btn) return "blackButton";
else return "whiteButton";
};
render() {
return (
<div>
<button
className={this.addDarkClass("btn1")}
onClick={this.changeColor.bind(this, "btn1")}
>
Button1
</button>
<button
className={this.addDarkClass("btn2")}
onClick={this.changeColor.bind(this, "btn2")}
>
Button2
</button>
<button
className={this.addDarkClass("btn3")}
onClick={this.changeColor.bind(this, "btn3")}
>
Button3
</button>
</div>
);
}
}
export default Test;

在这里，我创建了一个添加dark类的函数，它将接受btn名称，然后通过与当前状态值进行比较来返回dark-of white类。

METHOD-2
如果按钮没有太多单独的属性，则可以使用map

class Test extends Component {
constructor() {
super();
this.state = {
darkBtn: 0
};
}
changeColor = (btn) => {
this.setState({ darkBtn: btn });
};
btns = ["Button1", "Button2", "Button3"];
render() {
return (
<div>
{this.btns.map((btn, i) => (
<button
key={i}
onClick={this.changeColor.bind(this, i)}
className={this.state.darkBtn === i ? "blackButton" : "whiteButton"}
>
{btn}
</button>
))}
</div>
);
}
}
export default Test;

Answer 2

您可以做一些比这简单得多的事情。使用state保存当前活动按钮的索引。创建一个任意大小的数组。使用.map函数对其进行迭代以创建按钮。使活动按钮的索引等于状态的活动变量。

class Test extends Component {
constructor(){
super();
this.state = {
active: 0
}
}
changeColor = (i) => {
this.setState({active: i})
}
render(){
return (
<div>
{Array.apply(null, Array(3)).map((el, i) => {
const active = this.state.active === i
<button key={i} className={active ? 'blackButton' : 'whiteButton'}
onClick={() => this.changeColor(i)}>
`Button${i + 1}`
</button>
</div>
)
}
}
export default App;

Answer 3

它正在中工作

import React, { useState } from 'react';   
import './App.css';
const App = () => {
const [current, setCurrent] = useState(0);
const renderComp = () => {
return [0, 1, 2].map(el => {
return <button 
className={el === current ? 'blackButton': 'whiteButton'} 
onClick={()=> setCurrent(el)}
key={el} > {`Button${el+1}`} </button>
})
}
return (
<div>
{renderComp()}
</div>
)
}