本人将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.我的代码还有什么地方需要改进的,大家可以指出来,谢谢大家。
React 提交表单可以使用
ajax
,当然现在也可以使用fetch
,这个 API 未来应该会取代ajax
,不妨去学一下。你在
handleSubmit
里面开启一个ajax
请求,等到请求返回的时候做一些动作(比如修改 state 然后重新渲染组件之类的)就好了。getDOMNode()
,React.findDOMNode()
是 React 的 API (不知道你说的 Node 是指 DOM 中的 Node 还是Node.js
)。总之这些方法可以在 React 的文档里面查到。
健壮就是在服务器端验证,客户端再怎么写就是体验好一点,提示帐号密码位数特殊符号不让填什么的。fetch好一些,跨域用cors也方便
配合redux-form,可以写验证;提交还是用fetch比较好
为了配合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>
)
}