十、React 更新之后重新显示组件

打开CommentBox.js

修改handleCommentSubmit方法

handleCommentSubmit(comment){
        // console.log(comment);
        let comments = this.state.data,
            newComments = comments.concat(comment);

        this.setState({data: newComments});
    }

然后到return()中

修改CommentForm

<CommentForm onCommentSubmit={this.handleCommentSubmit.bind(this)}/>

添加.bind(this)

打开CommentForm.js

修改handleSubmit方法

handleSubmit(event){
        event.preventDefault();
        console.log('提交表单......');
        let author = this.refs.author.value,
            text = this.refs.text.value;

        console.log(author + " " + text);

        this.props.onCommentSubmit({author,text,date: '刚刚'});
    }

this.props.onCommentSubmit({author,text,date: '刚刚'});

刷新页面

输入姓名和评论内容，点击新增评论按钮，查看控制台打印。

相应的页面效果