从子组件传递数据给父组件
commentForm组件
'use strict' import React from 'react' class CommentForm extends React.Component{ 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: '刚刚'}) } render() { return ( <form className="ui reply form" onSubmit={this.handleSubmit.bind(this)}> <div className="field"> <input type="text" placeholder="姓名" ref="author"/> </div> <div className="field"> <textarea placeholder="评论" ref="text"></textarea> </div> <button type="submit" className="ui blue button">添加评论</button> </form> ) } } export { CommentForm as default }; //输出CommentBox组件作为默认的东西commentBox组件
'use strict' import React from 'react'; import CommentList from './CommentList'; import CommentForm from './CommentForm'; import $ from 'jquery' class CommentBox extends React.Component{ constructor(props) { super(props); //设置组件初始化状态 this.state = { data: [] }; this.getComments(); setInterval(() => this.getComments(), 5000); } //构造函数 handleCommentSubmit(comment) { console.log(comment); //用户提交的内容 let comments = this.state.data, //获取原来提交的内容 newComments = comments.concat(comment); //新的提交内容 this.setState({data: newComments}); } getComments() { $.ajax({ url: this.props.url, dataType: 'json', cache: false, success: comments => { this.setState({data: comments}) }, error: (xhr, status, error) => { console.log(error) } }) } render() { return( <div className = "ui comments"> <h1>评论</h1> <div className="ui divider"></div> <CommentList data = {this.state.data} /> <CommentForm onCommentSubmit={this.handleCommentSubmit.bind(this)}/> </div> ); } } export { CommentBox as default }; //输出CommentBox组件作为默认的东西为什么在函数后面加.bind(this)？
handleCommentSubmit(comment) { console.log(comment); //用户提交的内容 let comments = this.state.data, //获取原来提交的内容 newComments = comments.concat(comment); //新的提交内容 this.setState({data: newComments}); }函数中有使用到this