Question

我将Material UI用于连接和断开连接的图标。我希望应用程序在这两个图标onClick之间交换。我是React的新手，但是还没有任何有用的资源。这是到目前为止的代码：

 { user.connected ? 
    (
    <Button color="info" simple size="sm">
      <PersonAddDisabled className={classes.footerIcons} /> Disconnect
    </Button> 
    )
    : 
    (
     <Button color="info" size="sm">
        <PersonAdd className={classes.footerIcons} /> Connect
     </Button> 
    )
}

如上所述，我在解决它们是否已连接的问题，但是我不确定如何实现这两个按钮的切换，在onClick上将在这两个按钮之间进行切换。

Answer 1

这是一个代码您的状态

 state = {
    connected: true
 }

 onClickButton(){      
   this.setState(prevState => {connected: !this.prevState.connected}) 
 }

您的代码

{ this.state.connected ? 
  (
  <Button color="info" simple size="sm" onClick={ this.onClickButton }>
   <PersonAddDisabled className={ classes.footerIcons } /> Disconnect
  </Button> 
  )
  : 
  (
  <Button color="info" size="sm" onClick={ this.onClickButton }>
    <PersonAdd className={ classes.footerIcons } /> Connect
  </Button> 
  )
}

如何在React中的按钮状态之间切换？

1 个答案: