用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 (
     

         
                 {this.state.isToggleOn ? "ON" : "OFF"}
              
                {
                  this.state.names.map(name=>

{name}

)
                }
     

    );
  }
}

export default App;