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

Question

本人将ajax封装好了，代码如下：表单代码如下：我的疑问：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>

        )

    }