// tutorial15.js
var CommentForm = React.createClass(
{ render: function() { return ( <form className="commentForm"> <input type="text" placeholder="Your name" /> <input type="text" placeholder="Say something..." /> <input type="submit" value="Post" /> </form> ); }});
如上，構建一個表單。
接下來為表單增加提交處理的函數。
// tutorial16.js
var CommentForm = React.createClass({ handleSubmit: function(e) {e.preventDefault();var author = this.refs.author.getDOMNode().value.trim();var text = this.refs.text.getDOMNode().value.trim();if (!text || !author) {return;}// TODO: send request to the serverthis.refs.author.getDOMNode().value = '';this.refs.text.getDOMNode().value = '';return;}, render: function() { return ( <form className="commentForm" onSubmit={this.handleSubmit}> <input type="text" placeholder="Your name" ref="author" /> <input type="text" placeholder="Say something..." ref="text" /> <input type="submit" value="Post" /> </form> );
}
});
這里在createClass內部創建一個handleSubmit的函數，然后form元素綁定這個函數 綁定事件是onSubmit
提交表單后需要更新數據，這部分工作需要在父組件中完成，那么如何完成這種數據傳遞？
// tutorial17.js
var CommentBox = React.createClass({
loadCommentsFromServer: function() {
$.ajax(
{
url: this.props.url,
dataType: 'json',
success: function(data) {
this.setState({data: data}); }.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString()); }.bind(this) }); }, handleCommentSubmit: function(comment) { // TODO: submit to the server and refresh the list }, getInitialState: function() { return {data: []}; },
componentDidMount: function() { this.loadCommentsFromServer(); setInterval(this.loadCommentsFromServer, this.props.pollInterval); },
render: function() {
return ( <div className="commentBox"> <h1>Comments</h1> <CommentList data={this.state.data} /> <CommentForm onCommentSubmit={this.handleCommentSubmit} /> </div> );
}
});
到這里先不太要看上面的那個CommentForm,我們重新改第二個版本，那個監聽事件肯定要改了。
// tutorial18.js
var CommentForm = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
var author = this.refs.author.getDOMNode().value.trim();
var text = this.refs.text.getDOMNode().value.trim();
if (!text || !author) { return; } this.props.onCommentSubmit({author: author, text: text}); this.refs.author.getDOMNode().value = '';
this.refs.text.getDOMNode().value = ''; return; },
render: function() {
return (
<form className="commentForm" onSubmit={this.handleSubmit}>
<input type="text" placeholder="Your name" ref="author" />
<input type="text" placeholder="Say something..." ref="text" />
<input type="submit" value="Post" /> </form> ); }
});
看重點標注的段落內部組件控制數據的驗證然后調用外部組件的方法提交表單，外部表單更新數據。
//完整的例子：
// tutorial19.js
var CommentBox = React.createClass({
loadCommentsFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
success: function(data) { this.setState({data: data}); }.bind(this),
error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); },
handleCommentSubmit: function(comment) { $.ajax({ url: this.props.url, dataType: 'json', type: 'POST', data: comment, success: function(data) { this.setState({data: data}); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); },
getInitialState: function() {
return {data: []}; },
componentDidMount: function() {
this.loadCommentsFromServer();
setInterval(this.loadCommentsFromServer, this.props.pollInterval); },
render: function() {
return ( <div className="commentBox"> <h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm onCommentSubmit={this.handleCommentSubmit} />
</div> ); }
});
到現在組件基本完成了，唯一不足的是感覺起來慢，因為你需要等數據結果返回才能拿到最后效果，所以還需要在數據返回前先加入剛剛要提交到后台的數據，讓它看起來像很快的樣子。
// tutorial20.js
var CommentBox = React.createClass({
loadCommentsFromServer: function() {
$.ajax(
{
url: this.props.url,
dataType: 'json',
success: function(data) {
this.setState({data: data}); }.bind(this),
error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); },
handleCommentSubmit: function(comment) { var comments = this.state.data; var newComments = comments.concat([comment]); this.setState({data: newComments}); $.ajax(
{
url: this.props.url,
dataType: 'json',
type: 'POST',
data: comment,
success: function(data) { this.setState({data: data}); }.bind(this),
error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); },
getInitialState: function() { return {data: []}; },
componentDidMount: function() {
this.loadCommentsFromServer();
setInterval(this.loadCommentsFromServer, this.props.pollInterval); },
render: function() { return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm onCommentSubmit={this.handleCommentSubmit} /> </div> );
}});
ok到這里你已經做出了一個reactbox，接下來探討下為什么使用react.