react 表单提交可以用ajax吗？怎么写比较健壮？

Question

本人将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.我的代码还有什么地方需要改进的，大家可以指出来，谢谢大家。

Answer 1

为了配合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>
        )
    }

Answer 2

1. React 提交表单可以使用 ajax，当然现在也可以使用 fetch，这个 API 未来应该会取代 ajax，不妨去学一下。

2. 你在 handleSubmit 里面开启一个 ajax 请求，等到请求返回的时候做一些动作（比如修改 state 然后重新渲染组件之类的）就好了。

3. getDOMNode()，React.findDOMNode() 是 React 的 API (不知道你说的 Node 是指 DOM 中的 Node 还是 Node.js）。总之这些方法可以在 React 的文档里面查到。

Answer 3

配合redux-form，可以写验证；提交还是用fetch比较好

Answer 4

健壮就是在服务器端验证，客户端再怎么写就是体验好一点，提示帐号密码位数特殊符号不让填什么的。fetch好一些，跨域用cors也方便