Boa noite,
Tenho vários botões e estou tentando mudar a cor ao clicar num botão, mas acaba que muda a cor de todos.
import React, { Component } from 'react'
class Lotofacil extends Component {
constructor(props) {
super(props)
this.state = {
black01: false,
black02: false,
black03: false,
black04: false,
black05: false
}
this.changeColor = this.changeColor.bind(this)
}
changeColor(e) {
console.log("Chamou", e.target.value)
this.setState({
black01: !this.state.black01,
black02: !this.state.black02,
black03: !this.state.black03,
black04: !this.state.black04,
black05: !this.state.black05
})
e.preventDefault()
}
render() {
let btn_class01 = this.state.black01 ? "blackButton" : "whiteButton"
let btn_class02 = this.state.black02 ? "blackButton" : "whiteButton"
let btn_class03 = this.state.black03 ? "blackButton" : "whiteButton"
let btn_class04 = this.state.black04 ? "blackButton" : "whiteButton"
let btn_class05 = this.state.black05 ? "blackButton" : "whiteButton"
return (
<div className="container">
<div>
<button type="button" value="1" onClick={this.changeColor.bind(this)} className={btn_class01} >01</button>
<button type="button" value="2" onClick={this.changeColor.bind(this)} className={btn_class02} >02</button>
<button type="button" value="3" onClick={this.changeColor.bind(this)} className={btn_class03} >03</button>
<button type="button" value="4" onClick={this.changeColor.bind(this)} className={btn_class04} >04</button>
<button type="button" value="5" onClick={this.changeColor.bind(this)} className={btn_class05} >05</button>
</div>
</div>
)
}
}
export default Lotofacil
button{
width: 80px;
height: 40px;
margin: 15px;
}
.blackButton{
background-color: black;
color: white;
}
.whiteButton{
background-color: white;
color: black;
}