web-dev-qa-db-ja.com

REACTフェッチポストリクエスト

ポストリクエストのルーティングに問題がある

//フォームは必須モデルです

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

しかし、私は郵便配達員ではなく、クライアント側からそれを発射する必要があります。そして、ここで私は失われました。私はそれを行うことができますが、onSubmitアクションを追加すると動作しません。そして、新しい関数を使用して、別のページにリダイレクトせずに別のものを起動する必要があります。フェッチ機能を使用できるようにthis.refs.first_name.valueをボディに渡す方法は？反応するコンポーネントの下

この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

refの使用方法は非推奨になったと思います。以下を試してみてください。運があるかどうかを確認してください。

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

refsに関するドキュメントに反応するための link

5
Amir Hoseinian

制御されたコンポーネントの概念を使用できます。

そのために、状態値を追加し、

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

入力フィールドは次のようになります。

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

そして、handleSubmitは次のようになります。

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