React系列五——event事件

从子组件传递数据给父组件

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