web-dev-qa-db-fra.com

REACT fetch post request

J'ai un problème avec la demande de routage post.. J'ai besoin de créer un formulaire de registre et de poster une saisie de formulaire à mongodb

// la forme est requise model 

router.route('/').post(function(req,res,next){
 res.send(req.body)
 form.create(
  {"first_name": req.body.first_name,
  "last_name": req.body.last_name
 })
  .then(function(data){ 
  res.send(data);
  console.log(data);
 }).catch(function(err){console.log(err)});
});

Mais je dois le virer côté client, pas facteur. Et me voilà perdu. Je peux le faire avec mais quand j'ajoute l'action onSubmit cela ne fonctionne pas. Et je dois utiliser une nouvelle fonction pour déclencher autre chose sans rediriger vers une autre page. Comment passer this.refs.first_name.value au corps afin que je puisse utiliser la fonction de récupération? Ci-dessous le composant de réaction

a ajouté cet extrait JavaScript/JSON

export default class Form extends React.Component {
 constructor(props){
  super(props);
  this.handleSubmit = this.handleSubmit.bind(this);
 }
 handleSubmit(event){ 
  event.preventDefault();
  console.log(this.refs.first_name.value);
  fetch('/', {
   method: 'post',
   body: {
    "first_name": this.refs.first_name.value
   }
  });
 };
 render () {
  return (
   
   <div id="signup">
    <form onSubmit={this.handleSubmit}>
        <input ref="first_name" placeholder="First Name" type="text" name="first_name"/><br />
        <input placeholder="Last Name" type="text" name="last_name"/><br />
       <button type="Submit">Start</button>
    </form>
​
   </div>
​
  )
 }
}

javascriptmongodbrestreactjsfetch
5
Kamil Lewandowski

Je suppose que la façon dont vous utilisez ref est obsolète. essayez ci-dessous voir si vous avez de la chance.

export default class Form extends React.Component {
 constructor(props){
  super(props);
  this.handleSubmit = this.handleSubmit.bind(this);
 }

 handleSubmit(event){ 
  event.preventDefault();
  fetch('/', {
   method: 'post',
   headers: {'Content-Type':'application/json'},
   body: {
    "first_name": this.firstName.value
   }
  });
 };

 render () {
  return (
   
   <div id="signup">
    <form onSubmit={this.handleSubmit}>
        <input ref={(ref) => {this.firstName = ref}} placeholder="First Name" type="text" name="first_name"/><br />
        <input ref={(ref) => {this.lastName = ref}} placeholder="Last Name" type="text" name="last_name"/><br />
       <button type="Submit">Start</button>
    </form>
​
   </div>
​
  )
 }
}

Voici un link pour réagir à la documentation sur refs

5
Amir Hoseinian

Vous pouvez utiliser le concept de composants contrôlés.

Pour cela, ajoutez la valeur d'état,

constructor(props){
  super(props);
  this.handleSubmit = this.handleSubmit.bind(this);
  this.state={ firstname:"", lastname:""} 
}

Maintenant, les champs de saisie ressemblent,

<input placeholder="First Name" type="text" value={this.state.firstname} onChange={(ev)=>this.setState({firstname:ev.target.value})}/>
<input placeholder="Last Name" type="text" value={this.state.lastname} onChange={(ev)=>this.setState({lastname:ev.target.value})}/>

et handleSubmit devrait être comme,

handleSubmit(event){ 
  event.preventDefault();
  fetch('/', {
   method: 'post',
   headers: {'Content-Type':'application/json'},
   body: {
    "first_name": this.state.firstName
   }
  });
 };
0
Rohith Murali