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

Question

我使用 Material UI 作为连接和断开连接的图标。 我希望应用程序在单击时在这两个图标之间交换。 我是 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> 
  )
}