子组件到父组件

将数据发送回父级，为此，我们只需将一个函数作为 prop 从父组件传递给子组件，子组件调用该函数。

在此示例中，我们将通过将函数传递给 Child 组件并在 Child 组件内调用该函数来更改 Parent 状态。

import React from 'react';

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };

        this.outputEvent = this.outputEvent.bind(this);
    }
    outputEvent(event) {
        // the event context comes from the Child
        this.setState({ count: this.state.count++ });
    }

    render() {
        const variable = 5;
        return (
            <div>
                Count: { this.state.count }
                <Child clickHandler={this.outputEvent} />
            </div>
        );
    }
}

class Child extends React.Component {
    render() {
        return (
            <button onClick={this.props.clickHandler}>
                Add One More
            </button>
        );
    }
}

export default Parent;

请注意，Parent 的 outputEvent 方法（更改父状态）由 Child 的按钮 onClick 事件调用。