Réagir sur le bouton: comment le faire changer onCliquez sur

Question

J'apprends à Réagir et j'essaye de créer un bouton qui va changer au clic. Il doit être "Réussir" ou "Ne pas réussir" selon la réponse du serveur. C'est ce que j'ai fait jusqu'ici. Ma question est - ce que la fonction handleClick doit faire? Devrais-je utiliser la transition en changeant de classe? Merci!

class Btn extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.handleClick = this.handlenClick.bind(this); 
 
    } 
 

 
    handleClick() { 
 
    ??? 
 
    } 
 
\t 
 
    render() { 
 
    const succeed = (
 
     <div> 
 
     <ButtonToolbar> 
 
      <Button bsStyle="primary" bsSize="large">Succeed</Button> 
 
     </ButtonToolbar> 
 
     </div> 
 
    ) 
 
\t \t 
 
    const notsucceed = (
 
     <div> 
 
     <ButtonToolbar> 
 
      <Button bsStyle="primary" bsSize="large">Not succeed</Button> 
 
     </ButtonToolbar> 
 
     </div> 
 
\t \t) 
 
\t \t 
 
    return (
 
     <div onClick={this.handleClick.bind(this)}> 
 
     {this.state ? succeed : notsucceed} 
 
     </div> 
 
    ) 
 
    } 
 
};

Answer 1

Vous devez mettre en œuvre l'état.

Par exemple: https://codesandbox.io/s/313vmr23k6

class Btn extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     succeed: false 
    }; 
    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
    this.setState(previousState => { 
     return { 
     succeed: !previousState.succeed 
     }; 
    }); 
    } 

    render() { 
    const succeed = (
     <div> 
      <button bsStyle="primary" bsSize="large">Succeed</button> 
     </div> 
    ) 

    const notsucceed = (
     <div> 
     <button bsStyle="primary" bsSize="large">Not Succeed</button> 
     </div> 
    ) 

    return (
     <div onClick={this.handleClick.bind(this)}> 
     {this.state.succeed ? succeed : notsucceed} 
     </div> 
    ) 
    } 
}; 

Answer 2

Vous appelez votre api là-bas et définir l'état en fonction si l'appel échoue ou succeeeds. Pour cela, votre appel API doit renvoyer une promesse. Quelque chose comme:

handleClick() { 
    Api.call() 
    .then((response) => { this.setState({ succeed: true }); }) 
    .catch((error) => { this.setState({ succeed: false }); }) 
}