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

来源：互联网发布：淘宝设置运费模板技巧编辑：程序博客网时间：2024/05/16 18:49

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

添加新的评论

更改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')

0 0