子元件到父元件

將資料傳送回父級，為此，我們只需將一個函式作為 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 事件呼叫。