react样式切换

react代码:

import React, { Component } from 'react';
import './App.css'
class App extends Component {
    state = {
        menuNum: 1
    }

    setMenuNum = (num) => {
        this.setState({
            menuNum: num
        });
    }


  render() {
    return (
        <div className="box">
          <button className={this.state.menuNum === 1 ? "btn btn-choose " : "btn"} onClick= {()=> this.setMenuNum(1)} >按钮1</button>
          <button className={this.state.menuNum === 2 ? "btn btn-choose " : "btn"} onClick= {()=> this.setMenuNum(2)} >按钮1</button>
          <button className={this.state.menuNum === 3 ? "btn btn-choose " : "btn"} onClick= {()=> this.setMenuNum(3)} >按钮1</button>
        </div>
    );
  }


}

export default App;

css代码:

.box {
  margin: 40px auto;
  text-align: center;
}

.btn {
  width: 80px;
  height: 40px;
  background: green;
  margin: 20px;
}

.btn-choose{
  background: pink;
}