react 子组件改变父组件的state

在React中，通常父组件管理全局状态（state），而子组件作为独立的行为单元，不会直接修改父组件的状态。然而，如果子组件需要向父组件传递信息并请求更新状态，可以通过props和回调函数（如`onSubmit`这样的事件处理器）来实现。

1. **通过props向下传递数据**：当子组件有新的数据想要更新父组件时，它可以通过props将数据传递给父组件。例如：

class ParentComponent extends React.Component {
  state = { data: '' };

  handleDataChange = (newData) => {
    this.setState({ data: newData });
  }

  render() {
    return (
      <ChildComponent onDataChange={this.handleDataChange} />
    );
  }
}

class ChildComponent extends React.Component {
  handleChange = () => {
    const newData = ... // 子组件内部获取的新值
    this.props.onDataChange(newData);
  }

  // 其他组件内容...
}

2. **通过回调函数触发更新**：子组件可以触发一个事件，这个事件会调用父组件提供的回调函数，然后由父组件负责更新状态：

class ParentComponent extends React.Component {
  handleUpdate = (newData) => {
    this.setState({ data: newData });
  }

  render() {
    return (
      <ChildComponent onUpdate={this.handleUpdate} />
    );
  }
}

// 子组件内部调用父组件的回调
<SubmitButton onClick={this.props.onUpdate(newData)} />

在这种模式下，子组件改变了它们传递给父组件的数据，间接影响了父组件的状态更新。