用React写一个状态切换的开关按钮几种写法

首先说明一下setState() 可以接收一个函数，这个函数接受两个参数，第一个参数表示上一个状态值，第二参数表示当前的 props

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
    constructor(props){
        super(props)
      this.state={
          names:['123', 'Tom', 'Alice'],
          isToggleOn:false
      };
      this.bindClick=this.bindClick.bind(this);
    }
  bindClick=()=>{

//方法1:
       var oldisToggleOn=this.state.isToggleOn
        this.setState({
          isToggleOn:!oldisToggleOn
       })

//方法2:
   this.setState(
          prevState => ({
            isToggleOn : !prevState.isToggleOn
          })
      )

//方法3:
            this.setState(
          prevState =>{
            return {isToggleOn : !prevState.isToggleOn}
          }
        )
            
  }
  render() {
    return (
      <div className="App">
         <button onClick={this.bindClick}>
                 {this.state.isToggleOn ? "ON" : "OFF"}
               </button>
                {
                  this.state.names.map(name=><div key={name}>{name}</div>)
                }
      </div>
    );
  }
}

export default App;