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