REACT 获取帖子请求

Question

我在路由发布请求时遇到问题我需要构建注册表单并将输入从表单发布到 mongodb 我在服务器端制作了路由器和发布路由并且它工作正常（当我使用邮递员时）

//表格是必需的模型

 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 传递给 body 以便我可以使用 fetch 函数？下面的反应组件

添加了这个 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>
​
  )
 }
}

原文由 Kamil Lewandowski 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我想您使用的方式 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 的反应文档的 链接

原文由 Amir Hoseinian 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我们需要将数据发送为 json stringify

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

原文由 Manoj Rana 发布，翻译遵循 CC BY-SA 4.0 许可协议