从子组件更改父组件属性/状态

// 父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      property: "初始值"
    };
  }

  handlePropertyChange = (newValue) => {
    this.setState({ property: newValue });
  };

  render() {
    return (
      <div>
        <ChildComponent onChange={this.handlePropertyChange} />
        <p>属性值：{this.state.property}</p>
      </div>
    );
  }
}

// 子组件
class ChildComponent extends React.Component {
  handleClick = () => {
    // 子组件中通过调用回调函数来通知父组件属性的修改
    this.props.onChange("新值");
  };

  render() {
    return (
      <button onClick={this.handleClick}>修改属性</button>
    );
  }
}

// 创建上下文
const MyContext = React.createContext();

// 父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      property: "初始值"
    };
  }

  handlePropertyChange = (newValue) => {
    this.setState({ property: newValue });
  };

  render() {
    return (
      <MyContext.Provider
        value={{
          property: this.state.property,
          onPropertyChange: this.handlePropertyChange
        }}
      >
        <ChildComponent />
        <p>属性值：{this.state.property}</p>
      </MyContext.Provider>
    );
  }
}

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

  handleClick = () => {
    // 子组件中通过上下文访问父组件的属性和方法进行修改
    this.context.onPropertyChange("新值");
  };

  render() {
    return (
      <button onClick={this.handleClick}>修改属性</button>
    );
  }
}