从子组件更新父组件的状态

// 父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      parentState: ''
    };
  }

  updateParentState = (data) => {
    this.setState({ parentState: data });
  }

  render() {
    return (
      <div>
        <ChildComponent updateParentState={this.updateParentState} />
        <p>Parent State: {this.state.parentState}</p>
      </div>
    );
  }
}

// 子组件
class ChildComponent extends React.Component {
  updateParent = () => {
    this.props.updateParentState('Updated from child component');
  }

  render() {
    return (
      <div>
        <button onClick={this.updateParent}>Update Parent State</button>
      </div>
    );
  }
}

// 创建Context
const MyContext = React.createContext();

// 父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      parentState: ''
    };
  }

  updateParentState = (data) => {
    this.setState({ parentState: data });
  }

  render() {
    return (
      <MyContext.Provider value={{ state: this.state, updateParentState: this.updateParentState }}>
        <ChildComponent />
        <p>Parent State: {this.state.parentState}</p>
      </MyContext.Provider>
    );
  }
}

// 子组件
class ChildComponent extends React.Component {
  static contextType = MyContext;

  updateParent = () => {
    this.context.updateParentState('Updated from child component');
  }

  render() {
    return (
      <div>
        <button onClick={this.updateParent}>Update Parent State</button>
      </div>
    );
  }
}