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

本人将ajax封装好了,代码如下:

https://img2.mukewang.com/5bab38000001e1e603940275.jpg

表单代码如下:

https://img.mukewang.com/5bab380f0001034606330557.jpg

我的疑问:

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


泛舟湖上清波郎朗
浏览 999回答 1
1回答

江户川乱折腾

为了配合npm,我个人项目是用的ES6的Fetch来进行HTTP请求import React from 'react';class Test extends React.Component{&nbsp; &nbsp; constructor(...props){&nbsp; &nbsp; &nbsp; &nbsp; super(...props);&nbsp; &nbsp; &nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; username:'',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; password:''&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; http(url, options, type = 'json') {&nbsp; &nbsp; &nbsp; &nbsp; options = options || {};&nbsp; &nbsp; &nbsp; &nbsp; options.credentials = 'include';&nbsp; &nbsp; &nbsp; &nbsp; return fetch(url, options).then((resp)=> {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (resp.ok) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return resp[type]();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return resp[type]().then((err)=> {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; throw new AppError(err.errmsg, err.errcode);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; onSubmit(e){&nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; this.http('/api/user/login', {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; method: 'POST',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; body: JSON.stringify(this.state),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; headers: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'Content-Type': 'application/json'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }).then((data)=> {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(data);&nbsp; &nbsp; &nbsp; &nbsp; }).catch((e)=>alert(e.message)});&nbsp; &nbsp; }&nbsp; &nbsp; render(){&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <form onSubmit={e=>this.onSubmit(e)}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" value={this.state.username} placeholder="用户名" onChange={e=>this.setState({username:e.target.value})}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="password" value={this.state.password} placeholder="密码" onChange={e=>this.setState({password.target.value})}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button>提交</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript