React 状态提升 子组件传递数据到父组件

Question

React 状态提升，类似于 Vue 的 event emit，只是实现的方式不同

父组件

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Name from './Name';

class App extends Component {
  constructor(props) {
    super(props);
    this.nameChange = this.nameChange.bind(this);
  }
  render() {
    return (
      <div className="App">
    
        <Name onNameChange={this.nameChange}></Name>
      </div>
    );
  }

  nameChange(value) {
    console.log(value);
  }
}

export default App;

子组件：

import React, { Component } from 'react';

class Name extends Component {
    constructor(props) {
        super(props);
        this.nameChange = this.nameChange.bind(this);
    }
  render() {
    return (
      <div>
        <label>Name:</label>
        <input type="text" onChange={this.nameChange} />
      </div>
    );
  }

  nameChange(event) {
    this.props.onNameChange(event.target.value);
  }
  
}

export default Name;

当在子组件更改 props 值时，父组件能够实时接收到，可以看到组件中的 state，和 props 都是响应式的。