在React中将状态从子级传递到父级；子级具有单独的状态

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

  handleChildState = (childState) => {
    this.setState({ parentState: childState });
  }

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

// 子级组件
class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      childState: ''
    };
  }

  handleChange = (event) => {
    const newState = event.target.value;
    this.setState({ childState: newState });
    this.props.onStateChange(newState); // 调用父级传递的回调函数
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.childState} onChange={this.handleChange} />
        <p>Child State: {this.state.childState}</p>
      </div>
    );
  }
}