javascript - React JS 按钮手柄从“开”切换到“关”

Question

如何修改组件，以便您可以正确切换按钮以在“ ON ”状态和“ OFF ”状态之间切换。当按钮打开并单击时，它会关闭并且其中的文本从“ ON ”变为“ OFF ”，反之亦然。

export default class App extends Component {
  
 state = {
   switchButton: "Off"
 }

  handleClick(text) {
    this.setState({switchButton: text})
      }

  
  render() {

    return (
      <button onClick={()=> this.handleClick("On")}>
      {this.state.switchButton}
      </button>
    );
  }
}

标签： javascriptreactjsclass

Answer 1

你可以试试这个。谢谢你。

export default class App extends Component {
  
  state = {
    isOn: false,
  }

  handleClick() {
    this.setState(preState => ({ isOn: !preState.isOn }))
  }

  
  render() {
    const { isOn } = this.state;
    
    return (
      <button onClick={this.handleClick}>
      {isOn ? "On" : "Off"}
      </button>
    );
  }
}