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