React中如何将子组件数据传递给父组件？CV生成器场景实操问题

核心思路 #

采用状态提升+回调透传的方案，无需引入额外状态管理库，适配你当前的组件结构：

1. 在顶层App组件存储所有表单的总数据
2. 定义数据更新方法逐层透传给Form下的三个子表单组件
3. 子表单组件内容变化时，调用回调将最新数据同步到App总状态
4. App将总状态传递给预览组件<DisplayInfo />实现实时渲染

具体修改步骤 #

第一步：修改App.js，定义总状态和更新方法 #

class App extends React.Component {
  constructor(props) {
    super(props);
    // 总状态存储三个子表单的所有数据
    this.state = {
      formData: {
        personalInfo: {},
        experience: {},
        education: {}
      }
    };
    this.updateFormData = this.updateFormData.bind(this);
  }

  // 接收子组件传递的最新数据，更新总状态
  updateFormData(formType, data) {
    this.setState(prev => ({
      formData: {
        ...prev.formData,
        [formType]: data
      }
    }));
  }

  render() {
    return (
      <div className='container'>
        {/* 把更新方法传给Form组件 */}
        <Form onDataChange={this.updateFormData} />
        {/* 把总表单数据传给预览组件 */}
        <DisplayInfo data={this.state.formData} />
      </div>
    );
  }
}

第二步：修改Form.js，透传回调方法给子表单 #

class Form extends React.Component {
  render() {
    const { onDataChange } = this.props;
    return (
      <form>
        {/* 给每个子表单传递对应类型和回调 */}
        <PersonalInfo onChange={(data) => onDataChange('personalInfo', data)} />
        <Experience onChange={(data) => onDataChange('experience', data)} />
        <Education onChange={(data) => onDataChange('education', data)} />
      </form>
    );
  }
}

第三步：修改子表单组件，数据变化时同步到上层 #

以<PersonalInfo />为例，另外两个组件修改逻辑完全一致：
你只需要在现有子组件的onChange事件执行setState后，调用上层传的onChange回调把最新state传出去即可，不用改动你现有子组件的内部状态逻辑：

class PersonalInfo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstName: '',
      lastName: '',
      title: '',
      address: '',
      phoneNumber: '',
      email: '',
      description: '',
    };
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(e) {
    const { name, value } = e.target;
    // 你原来的setState逻辑不变，加第二个回调参数同步数据到上层
    this.setState({
      [name]: value
    }, () => {
      // setState异步更新完成后，把最新state传给上层
      this.props.onChange(this.state);
    });
  }

  // 剩下的渲染逻辑和你原来的一致，输入框绑定handleInputChange即可
  render() {
    return (
      // 你的原有输入框代码，比如：
      <input name="firstName" value={this.state.firstName} onChange={this.handleInputChange} />
      // 其他输入框同理
    )
  }
}

预览组件取值 #

你在<DisplayInfo />组件里可以直接通过props.data拿到所有表单数据，比如要取姓名就是props.data.personalInfo.firstName，数据变化会自动触发组件重新渲染，实现实时预览效果。

内容的提问来源于stack exchange，提问作者user14925601