已解決430363個問題，去搜搜看，總會有你想問的

react 表單提交可以用ajax嗎？怎么寫比較健壯？

首頁猿問 react...

react 表單提交可以用ajax嗎？怎么寫比較健壯？

JavaScript

泛舟湖上清波郎朗 2018-08-02 10:10:00

本人將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.我的代碼還有什么地方需要改進的，大家可以指出來，謝謝大家。

查看完整描述

1 回答

江戶川亂折騰

TA貢獻1851條經驗獲得超5個贊

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

</form>

)

}

反對回復 2018-09-26

1 回答
0 關注
1028 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

react 表單提交可以用ajax嗎？怎么寫比較健壯？

react 表單提交可以用ajax嗎？怎么寫比較健壯？

1 回答

添加回答

react 表單提交可以用ajax嗎？怎么寫比較健壯？

react 表單提交可以用ajax嗎？怎么寫比較健壯？