Używam Material UI do ikon łączenia i rozłączania. Chcę, aby aplikacja przełączała się między tymi dwiema ikonami onClick. Jestem nowy w React, ale nie mam jeszcze żadnych pomocnych zasobów. Oto kod w obecnej postaci:

 { 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> 
    )
}

Jak jest powyżej, adresuję, czy są podłączone, czy nie, ale nie jestem pewien, jak zaimplementować przełącznik tych dwóch przycisków, gdzie onClick przełączy się między nimi.

0
Filipe 20 listopad 2019, 07:46
O co tu chodzi?
 – 
ravibagul91
20 listopad 2019, 07:49

1 odpowiedź

Tutaj jest kod Twój stan

 state = {
    connected: true
 }

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

Twój kod

{ 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> 
  )
}
2
tareq aziz 20 listopad 2019, 10:59