React入门(四) 评论模块续-评论表单

这次我们完成评论表单，即填写内容，发表。

添加新的评论

更改commentForm组件：

var CommentForm = React.createClass({
    handlerSubmit: function (e) {
        e.preventDefault();
        var author = this.refs.author.value.trim();
        var text = this.refs.text.value.trim();
        if(!text || !author)
        {
            console.log("评论或评论人为空");
            return;
        }
        this.refs.author.value = '';
        this.refs.text.value = '';
        return;
    },
    render: function () {
        return (
            <form className="commentForm"  onSubmit={this.handlerSubmit}>
                <input type="text" placeholder="Your name" ref="author" />
                <br/>
                <input type="text" placeholder="Say something..." ref="text" />
                <br/>
                <input type="submit" value="Post" />
            </form>
        );
    }
});

创建了两个输入框和一个提交按钮,并且我们绑定了一个监听事件，即点击提交的时候，我们调用this.handlerSubmit() 方法，并且将浏览器对象e传递过去，调用preventDefault()方法避免浏览器默认提交表单(不清楚什么意思。。)，但是form监听提交事件是使用onSubmit，这个可以确定~,请注意驼峰式命名onSubmit，否则会报错。

刚才我们只是用监听获取了用户输入的数据，现在我们准备真正提交它。

我们使用一个函数作为CommentForm的props，当点击提交按钮时，调用这个函数将数据传到CommentBox中，即我们在CommentBox做评论获取和评论上传工作。

更改CommentBox：

var CommentBox = React.createClass({
    getInitialState: function () {
        return {data:[]};
    },
    loadComments: function () {
        $.ajax({
            url:this.props.url,
            dataType:'json',
            cache:false,
            success: function (data) {
                var data1 = data.data;
                this.setState({data:data1});
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url,status,err.toString());
            }.bind(this)
        });
    },
    onCommentSubmit: function (comment) {
        console.log("comment:" + comment);
        $.ajax({
            url:this.props.url,
            dataType:'json',
            type:'POST',
            data:comment,
            success: function (data) {
                var dataArr = data.data;
                this.setState({data:dataArr});
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url,status,err.toString());
            }.bind(this)
        });
    },
    componentDidMount: function () {
        this.loadComments();
        setInterval(this.loadComments,2000);
    },
    render: function () {
        return (
            <div className="commentBox">
                <h1>Comments</h1>
                <CommentList data = {this.state.data}/>
                <CommentForm onSubmit = {this.onCommentSubmit}/>
            </div>
        );
    }
});

我们添加了一个onCommentSubmit方法，在这个方法中，我们做了一个POST请求，即将评论内容上传，同时，我们将这个回调方法作为props传递给CommentForm，更改CommentForm：

var CommentForm = React.createClass({
    handleCommentSubmit: function (e) {
        e.preventDefault();
        var author = this.refs.author.value.trim();
        var text = this.refs.text.value.trim();
        if (!text || !author) {
            console.log("kong");
            return;
        }
        this.props.onSubmit({author:author,text:text});
        this.refs.author.value = '';
        this.refs.text.value = '';
    },
    render: function () {
        return (
            <form className="commentForm" onSubmit={this.handleCommentSubmit}>
                <input type="text" ref="author" placeholder="Your name"/>
                <input type="text" ref="text" placeholder="Your name"/>
                <input type="submit" value="Post"/>
            </form>
        );
    }
});

在点击提交时，我们获取到评论内容，将其封装到一个对象中，通过this.props.onSubmit，将这个评论对象传递给了CommentBox，有点像代理委托呢~或者说就是吧。然后CommentBox又刷新了一遍评论，教程中说可以先把评论添加到评论列表中，再上传，我觉得正式使用时没必要，不然会出现服务器与前端同步问题。
至此评论模块就完成了，差的地方是上传的时候，url仅仅是一个json文件，get还可以获取到，但是POST就无法写入了，所以准备写一个php文件做写入操作。
下面是我们评论的所有代码，当然，输入评论并不会更新，因为我们服务器没有做。。

var CommentBox = React.createClass({
    getInitialState: function () {
        return {data:[]};
    },
    loadComments: function () {
        $.ajax({
            url:this.props.url,
            dataType:'json',
            cache:false,
            success: function (data) {
                var data1 = data.data;
                this.setState({data:data1});
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url,status,err.toString());
            }.bind(this)
        });
    },
    onCommentSubmit: function (comment) {
        console.log("comment:" + comment);
        $.ajax({
            url:this.props.url,
            dataType:'json',
            type:'POST',
            data:comment,
            success: function (data) {
                var dataArr = data.data;
                this.setState({data:dataArr});
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url,status,err.toString());
            }.bind(this)
        });
    },
    componentDidMount: function () {
        this.loadComments();
        setInterval(this.loadComments,2000);
    },
    render: function () {
        return (
            <div className="commentBox">
                <h1>Comments</h1>
                <CommentList data = {this.state.data}/>
                <CommentForm onSubmit = {this.onCommentSubmit}/>
            </div>
        );
    }
});


var CommentList = React.createClass({
    render: function () {
        var commentNodes = this.props.data.map(function (comment) {
            return (
                <Comment author = {comment.author}>{comment.text}</Comment>
            );
        });
        return(
            <div className = "commentList">
                {commentNodes}
            </div>
        )
            ;
    }
});

var CommentForm = React.createClass({
    handleCommentSubmit: function (e) {
        e.preventDefault();
        var author = this.refs.author.value.trim();
        var text = this.refs.text.value.trim();
        if (!text || !author) {
            console.log("kong");
            return;
        }
        this.props.onSubmit({author:author,text:text});
        this.refs.author.value = '';
        this.refs.text.value = '';
    },
    render: function () {
        return (
            <form className="commentForm" onSubmit={this.handleCommentSubmit}>
                <input type="text" ref="author" placeholder="Your name"/>
                <input type="text" ref="text" placeholder="Your name"/>
                <input type="submit" value="Post"/>
            </form>
        );
    }
});

var Comment = React.createClass({
    rawMarkup: function () {
        var rawMarkup = marked(this.props.children.toString(),{sanitize:true});
        return {__html:rawMarkup};
    },
    render: function () {
        return (
            <div className="comment">
                <h2 className = "commentAuthor">
                {this.props.author}
                </h2>

                <span dangerouslySetInnerHTML={this.rawMarkup()}/>
            </div>
        );
    }
});

ReactDOM.render(
    <CommentBox url = "reactDemo1/comments.json"/>,
    document.getElementById('example')