// 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.