javascript - react 表单提交可以用ajax吗?怎么写比较健壮?
本文介绍了javascript - react 表单提交可以用ajax吗?怎么写比较健壮?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
本人将ajax封装好了,代码如下:
const AjaxSend = function( action, url, data, callback ){
var settings = {
async: true,
crossDomain: true,
url: "https://leancloud.cn:443/1.1" + url,
method: action,
data: data
}
$.ajax(settings).done(function (response) {
callback(response)
});
}
export default AjaxSend;
表单代码如下:
class Login extends React.Component {
constructor(props){
super(props);
this.state = {
email:"",
password:"",
};
this.handleChange = this.handleChange.bind(this)
}
handleChange(e) {
this.setState({[e.target.name]: e.target.value})
}
handleSubmit(e) {
e.preventDefault();
//这里怎么写?
}
render(){
var email = this.state.email;
var password = this.state.password;
return (
<input type="email" name="email" value={email} onChange={this.handleChange} />
<input type="password" name="password" value={password} onChange={this.handleChange} />
) ;
}
}
export { Login as default } ;
我的疑问:
1.其实我主要是看到别人的demo很少用ajax的,是不是像登陆注册表单提交这样的请求一般不用ajax?
2.我看到别人写的请求,用到一些什么 getDOMNode(),以及React.findDOMNode().value.trim() 这种语法,本人对node不熟悉,这些方法是怎么用的?有相关文档吗?
别人的代码:(然而并不能看懂)
handleSubmit: function (e){
e.preventDefault();
var author = this.refs.author.getDOMNode().value.trim();
var text = this.refs.text.getDOMNode().value.trim();
if(!author || !text){ return; }
this.props.onCommentSubmit({author: author, text: text});
this.refs.author.getDOMNode().value = '';
this.refs.text.getDOMNode().value = ''; return;
},
3.我的代码还有什么地方需要改进的,大家可以指出来,谢谢大家。
解决方案
为了配合npm,我个人项目是用的ES6的Fetch来进行HTTP请求
import React from 'react';
class Test extends React.Component{
constructor(...props){
super(...props);
this.state = {
username:'',
password:''
};
}
http(url, options, type = 'json') {
options = options || {};
options.credentials = 'include';
return fetch(url, options).then((resp)=> {
if (resp.ok) {
return resp[type]();
} else {
return resp[type]().then((err)=> {
throw new AppError(err.errmsg, err.errcode);
});
}
});
}
onSubmit(e){
e.preventDefault();
this.http('/api/user/login', {
method: 'POST',
body: JSON.stringify(this.state),
headers: {
'Content-Type': 'application/json'
}
}).then((data)=> {
console.log(data);
}).catch((e)=>alert(e.message)});
}
render(){
return (
<form onSubmit={e=>this.onSubmit(e)}>
<input type="text" value={this.state.username} placeholder="用户名" onChange={e=>this.setState({username:e.target.value})}/>
<input type="password" value={this.state.password} placeholder="密码" onChange={e=>this.setState({password.target.value})}/>
<button>提交</button>
</form>
)
}
这篇关于javascript - react 表单提交可以用ajax吗?怎么写比较健壮?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文