1Html
2<div id="app"></div>
3
4Css
5button{
6 width: 80px;
7 height: 40px;
8 margin: 15px;
9}
10.blackButton{
11 background-color: black;
12 color: white;
13}
14
15.whiteButton{
16 background-color: white;
17 color: black;
18}
19
20React
21class Test extends React.Component {
22 constructor(){
23 super();
24
25 this.state = {
26 black: true
27 }
28 }
29
30 changeColor(){
31 this.setState({black: !this.state.black})
32 }
33
34 render(){
35 let btn_class = this.state.black ? "blackButton" : "whiteButton";
36
37 return (
38 <div>
39 <button className={btn_class}
40 onClick={this.changeColor.bind(this)}>
41 Button
42 </button>
43 </div>
44 )
45 }
46}
47
48ReactDOM.render(<Test />, document.querySelector("#app"))
49