は私が登録フォームを構築し、私は、サーバー側でルータとポストルートを作っ をMongoDBのために、フォームからの入力を投稿する必要が ルーティングポスト要求に問題があるPOSTリクエスト

Question

をフェッチ反応し、それがうまく動作

//フォームは、モデル

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アクションを追加するときにそれdoesntの仕事。そして、別のページにリダイレクトせずに別のものを起動するために新しい関数を使う必要があります。 bodyにthis.refs.first_name.valueを渡すことで、fetch関数を使うことができますか？以下 コンポーネントを反応

はこのJavaScript/JSONを追加し、私はあなたがrefを使用している方法が推奨されていませ推測

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

Answer 1

スニペット。あなたが運があれば、以下を試してみてください。ここで

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

は linkはおそらく、あなたは右のREFをバインドする方法である refs