Can ajax be used for react form submission? How to write more robust?

  node.js, question

I have packaged ajax and the code is as follows:

const AjaxSend = function( action, url, data, callback ){
 
 var settings = {
 async: true,
 crossDomain: true,
 Url: "https://leancloud.cn: 443/1.1" plus url.
 method: action,
 data: data
 bracket
 
 $.ajax(settings).done(function (response) {
 callback(response)
 });
 
 bracket
 export default AjaxSend;

The form code is as follows:

class Login extends React.Component {
 
 constructor(props){
 super(props);
 this.state = {
 email:"",
 password:"",
 };
 this.handleChange = this.handleChange.bind(this)
 bracket
 
 handleChange(e) {
 this.setState({[e.target.name]: e.target.value})
 bracket
 
 handleSubmit(e) {
 e.preventDefault();
 
 //How do you write it here?
 
 bracket
 
 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} />
 ) ;
 bracket
 bracket
 
 export { Login as default } ;

My question:

1. In fact, I mainly see that other people’s demo seldom use ajax. Is ajax generally not used for requests like login registration form submission?

2. I saw the request written by others, what getDOMNode () and React.findDOMNode().value.trim value.trim () syntax are used. I am not familiar with node, how are these methods used? Are there any relevant documents?

Other people’s code: (However, I can’t understand it)

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;  bracket
 this.props.onCommentSubmit({author: author, text: text});
 this.refs.author.getDOMNode().value = '';
 this.refs.text.getDOMNode().value = '';   return;
 },

3. There is still something to be improved in my code, you can point it out, thank you.

In order to cooperate with npm, my personal project is to use Fetch of ES6 to make HTTP requests.

import React from 'react';
 class Test extends React.Component{
 constructor(...props){
 super(...props);
 this.state = {
 username:'',
 password:''
 };
 bracket
 
 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);
 });
 bracket
 });
 bracket
 
 onSubmit(e){
 e.preventDefault();
 this.http('/api/user/login', {
 method: 'POST',
 body: JSON.stringify(this.state),
 headers: {
 'Content-Type': 'application/json'
 bracket
 }).then((data)=> {
 console.log(data);
 }).catch((e)=>alert(e.message)});
 bracket
 render(){
 return (
 <form onSubmit={e=>this.onSubmit(e)}>
 < inputtype = "text" value = {this.state.username} placeholder = "user name" onchange = {e = > this.setstate ({username: e.target.value})}/>
 < inputtype = "password" value = {this.state.password} placeholder = "password" onchange = {e = > this.setstate ({password.target.value})}/>
 < button > submit < /button >
 </form>
 )
 bracket