ReactJS: Event handlers nhiều Component lồng nhau, Chia nhỏ Component

Start project

Event handlers nhiều component lồng nhau

ReatcJS 2018

class Parent extends React.Component {
    constructor (props) {
        super(props);
        this.state = {}
    }
    onChangeParent(field, value) {
        this.setState({field: field,value: value});
    }
    render () {
        return (<div>
          <Child onChangeChildRefe={this.onChangeParent.bind(this)} />
          <span>Output: {this.state.value}</span><br/>
          <span>InputName: {this.state.field}</span>
        </div>);
    }
}

class Child extends React.Component {
    constructor (props) {
        super(props);
    }
    onChangeChild(field, value) {
        this.props.onChangeChildRefe(field, value);
    }
    render () {
        return <GrandChild onChangeGrandChildRefe={this.onChangeChild.bind(this)} />
    }
}

class GrandChild extends React.Component {
    constructor (props) {
        super(props);
    }
    onFieldChange(event) {
        const fieldName = event.target.name;
        const fieldValue = event.target.value;
        console.log(fieldName+" - "+fieldValue);
        this.props.onChangeGrandChildRefe(fieldName, fieldValue);
    }
    render () {
        return (<form>
          Input: <input type="text" name="jobNumber" onChange={this.onFieldChange.bind(this)} />
        </form>)
    }
}

ReactDOM.render(
  <Parent/ >
  ,document.getElementById('root'));