[英]REACT fetch post request
I have problem with routing post request I need to build register form and post input from form to mongodb I made router and post route on server side and it works ok (when I use postman)我在路由发布请求时遇到问题我需要构建注册表格并将表单输入发布到 mongodb 我在服务器端制作了路由器和发布路由并且它工作正常(当我使用邮递员时)
//form is required model //表格需要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)}); });
But I need to fire it form client side, not postman. And here i am lost.但我需要从客户端触发它,而不是 postman。我迷路了。 I can do it with but when i add onSubmit action it doesnt work.
我可以做到,但是当我添加 onSubmit 操作时,它不起作用。 And I need to use new function to fire another thing without redirecting to another page.
我需要使用新的 function 来触发另一件事而不重定向到另一个页面。 How to pass this.refs.first_name.value to body so that i could use fetch function??
如何将 this.refs.first_name.value 传递给 body 以便我可以使用 fetch function? Below react component
下面的反应组件
added this JavaScript/JSON 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> ) } }
I guess the way you are using ref
has been deprecated. 我猜你使用
ref
的方式已被弃用。 try below see if you have any luck. 试试下面看看你有没有运气。
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> ) } }
![]()
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> ) } }
![]()
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> ) } }
This is how I made my post request in React.js;这就是我在 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);
});
You can use the concept of controlled components. 您可以使用受控组件的概念。
For that, add state value, 为此,添加状态值,
constructor(props){
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.state={ firstname:"", lastname:""}
}
Now input fields to be like, 现在输入字段就像,
<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})}/>
and handleSubmit should be like, 和handleSubmit应该是这样的,
handleSubmit(event){
event.preventDefault();
fetch('/', {
method: 'post',
headers: {'Content-Type':'application/json'},
body: {
"first_name": this.state.firstName
}
});
};
we need to make sending data as json stringify 我们需要以json stringify的形式发送数据
handleSubmit(event){
event.preventDefault();
fetch('/', {
method: 'post',
headers: {'Content-Type':'application/json'},
body: JSON.stringify({
"first_name": this.state.firstName
})
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.