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

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

以下是link对refs

的文档作出反应

Answer 2

我们需要将数据发送为json字符串化

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

Answer 3

您可以使用受控组件的概念。

为此，添加状态值，

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

Answer 4

这就是我在React.js中发出帖子请求的方式;

const res = fetch('http://15.11.55.3:8040/Device/Movies', {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: {
     id: 0,
    },
   })
   .then((response) => response.json())
   .then((responseJson) => {
     return responseJson.movies;
   })
   .catch((error) => {
     console.error(error);
   });

REACT获取发布请求

4 个答案: