React中如何将子组件表单值传递至父组件状态？

这其实是React里非常常见的父子组件通信场景，我来一步步给你拆解实现步骤，代码示例都给你写好啦：

1. 先在父组件中定义处理子组件值的回调函数 #

你需要在父组件里写一个方法，用来接收子组件传过来的值，然后更新到state的form对象里。注意更新state的时候要展开原有表单数据，避免覆盖name、age这些其他字段：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      form: {
        name: '',
        age: '',
        value: ''
      }
    };
    // 绑定this，确保回调里能正确访问组件实例
    this.handleChildChange = this.handleChildChange.bind(this);
  }

  handleChildChange(value) {
    // 更新state中的form.value，保留其他字段
    this.setState(prevState => ({
      form: {
        ...prevState.form,
        value: value
      }
    }));
    // 可以在这里打印验证一下是否拿到值
    console.log('父组件收到子组件的值:', value);
  }

  // 后续处理表单提交的方法，比如发送请求
  handleSubmit = () => {
    console.log('要提交的表单数据:', this.state.form);
    // 这里写发送表单数据的逻辑，比如fetch/axios请求
  };

  render() {
    return (
      <div>
        {/* 把回调函数作为props传给子组件 */}
        <ChildForm onChange={this.handleChildChange} />
        {/* 可以加个按钮测试提交 */}
        <button onClick={this.handleSubmit}>提交表单</button>
      </div>
    );
  }
}

2. 修改子组件的onChange逻辑，调用父组件传来的回调 #

子组件原来的onChange只是打印值，现在需要改成调用父组件通过props传过来的onChange方法，把值传递回去：

function ChildForm(props) {
  // 子组件的onChange函数，调用父组件传来的回调
  function onChange(value) {
    console.log("This is: ", value);
    // 把值传给父组件
    props.onChange(value);
  }

  // 假设子组件是一个输入框，触发onChange时传递输入值
  return (
    <input
      type="text"
      onChange={(e) => onChange(e.target.value)}
      placeholder="输入内容..."
    />
  );
}

额外小提示 #

如果以后你的子组件需要传递多个表单字段的值（比如同时更新name或age），可以把参数改成一个包含字段名和值的对象，比如：

// 子组件里调用时
props.onChange({ field: 'name', value: e.target.value });

// 父组件的回调改成
handleChildChange({ field, value }) {
  this.setState(prevState => ({
    form: {
      ...prevState.form,
      [field]: value
    }
  }));
}

这样就能灵活更新表单里的任意字段啦～

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