Comment ajouter une route de publication à mon application de réaction

Question

J'ai un modal avec le code suivant dans mes composants et je voudrais ajouter une route de publication à mon code pour capturer la réponse de l'utilisateur. J'ai Mongo/Mongoose mis en place ainsi qu'un serveur backend. Toute aide serait incroyable car je suis nouveau à Réagir!

render() { 
 
\t \t return(
 
\t \t \t <div className="modal column y-center"> 
 
\t \t \t \t <h3>How are you doing?</h3> 
 
\t \t \t \t {!this.state.start ? (
 
\t \t \t \t \t <div className="choices"> 
 
\t \t \t \t \t \t <button onClick={() => this.startRelaxation('ok_images')}>Ok</button> 
 
\t \t \t \t \t \t <button onClick={() => this.startRelaxation('neutral_images')}>Neutral</button> 
 
\t \t \t \t \t \t <button onClick={() => this.startRelaxation('anxious_images')}>Anxious</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t) : (
 
\t \t \t \t \t <div className="column y-center"> 
 
\t \t \t \t \t \t <div className="image"> 
 
\t \t \t \t \t \t \t <img src={this.state[this.state.mood][this.state.current_image]}/> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <button onClick={this.nextImage.bind(this)}>Next Image</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t)} 
 
\t \t \t \t <button onClick={this.props.closeModal}>Close</button> 
 
\t \t \t </div> 
 
\t \t) 
 
\t } 
 
}

Answer 1

Je recommande brancher votre fonction startRelaxation() pour exécuter une requête HTTP à votre back-end en utilisant une bibliothèque 3ème partie, comme Axios. Si vous utilisez MongoDB, vous pouvez également trouver un outil de gestion de base de données tel que Parse Server très utile.

Answer 2

Ceci est juste construisaient hors du poste de Arman, mais vous pouvez faire quelque chose comme ceci:

import axios from 'axios'; 
 
import React, {Component} from 'react'; 
 

 
class YouComponent extends Component { 
 
     constructor(props){ 
 
      super(props); 
 
      this.startRelaxation = this.startRelaxation.bind(this); 
 
     } 
 
     startRelaxation(string){ 
 
      axios.post('YourRoute'{'BODY OF REQUEST'}) 
 
      .then(data => 'DO STUFF WITH DATA'); 
 
     } 
 
     render() { 
 
      return(
 
       <div className="modal column y-center"> 
 
        <h3>How are you doing?</h3> 
 
        {!this.state.start ? (
 
         <div className="choices"> 
 
          <button onClick={() => this.startRelaxation('ok_images')}>Ok</button> 
 
          <button onClick={() => this.startRelaxation('neutral_images')}>Neutral</button> 
 
          <button onClick={() => this.startRelaxation('anxious_images')}>Anxious</button> 
 
         </div> 
 
        ) : (
 
         <div className="column y-center"> 
 
          <div className="image"> 
 
           <img src={this.state[this.state.mood][this.state.current_image]}/> 
 
          </div> 
 
          <button onClick={this.nextImage.bind(this)}>Next Image</button> 
 
         </div> 
 
        )} 
 
        <button onClick={this.props.closeModal}>Close</button> 
 
       </div> 
 
      ) 
 
     } 
 
    }

Vous avez la demande de Axios dans la méthode startRelation et vous pouvez faire ce que vous avez besoin à faire dans la DB.