it-swarm-eu.dev

REACT preleva la richiesta

Ho problemi con il routing post request Ho bisogno di compilare il modulo di registrazione e postare input da form a mongodb Ho realizzato router e post route sul lato server e funziona bene (quando uso postino)

// modulo è richiesto 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)});
});

Ma ho bisogno di accenderlo dal lato client, non dal postino. E qui sono perso. Posso farlo con ma quando aggiungo l'azione di invio non funziona. E ho bisogno di usare una nuova funzione per sparare a un'altra cosa senza reindirizzare a un'altra pagina. Come passare this.refs.first_name.value al corpo in modo da poter utilizzare la funzione di recupero ?? Sotto reagire componente

aggiunto questo snippet 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

Immagino che il modo in cui stai usando ref sia stato deprecato. prova qui sotto vedi se hai fortuna.

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

Ecco un link per reagire su refs

5
Amir Hoseinian

È possibile utilizzare il concetto di componenti controllati.

Per quello, aggiungi il valore dello stato,

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

Ora i campi di input devono essere come,

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

e gestireSubmit dovrebbe essere come,

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