React表单提交数据跨组件传递问题求助

针对你遇到的问题，最直接且符合React设计理念的方案是状态提升——将表单数据的状态托管在两个组件的共同父组件中，通过props完成数据的传递和更新。以下是具体实现步骤和代码示例：

一、函数组件版本（React 16.8+ 推荐） #

1. 共同父组件（App.js） #

负责存储表单数据状态，并提供更新状态的方法，分别传递给表单组件和卡片组件：

import { useState } from 'react';
import FormComponent from './FormComponent';
import CardComponent from './CardComponent';

function App() {
  // 初始化表单数据状态，默认值为null表示暂无数据
  const [formData, setFormData] = useState(null);

  // 接收表单提交数据并更新状态的方法
  const handleFormSubmit = (data) => {
    setFormData(data);
  };

  return (
    <div style={{ padding: '20px' }}>
      {/* 将提交方法传给表单组件 */}
      <FormComponent onSubmit={handleFormSubmit} />
      {/* 只有当formData存在时，才渲染卡片组件并传递数据 */}
      {formData && <CardComponent data={formData} />}
    </div>
  );
}

export default App;

2. 表单组件（FormComponent.js） #

处理表单输入、收集数据，提交时调用父组件传来的方法传递数据：

import { useState } from 'react';

function FormComponent({ onSubmit }) {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (e) => {
    // 必须阻止表单默认提交行为，避免页面刷新丢失数据
    e.preventDefault();
    // 收集表单数据
    const submitData = { name, email };
    // 调用父组件的方法传递数据
    onSubmit(submitData);
    // 可选：提交后重置表单
    setName('');
    setEmail('');
  };

  return (
    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
      <div>
        <label>姓名：</label>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          required
          style={{ marginLeft: '8px' }}
        />
      </div>
      <div>
        <label>邮箱：</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
          style={{ marginLeft: '8px' }}
        />
      </div>
      <button type="submit" style={{ width: '100px' }}>提交</button>
    </form>
  );
}

export default FormComponent;

3. 卡片展示组件（CardComponent.js） #

接收父组件传递的表单数据，渲染展示卡片：

function CardComponent({ data }) {
  return (
    <div style={{ 
      border: '1px solid #ddd', 
      borderRadius: '8px', 
      padding: '16px', 
      marginTop: '20px',
      maxWidth: '300px'
    }}>
      <h3>用户信息卡片</h3>
      <p><strong>姓名：</strong>{data.name}</p>
      <p><strong>邮箱：</strong>{data.email}</p>
    </div>
  );
}

export default CardComponent;

二、类组件版本（兼容旧版React） #

如果还在使用类组件，逻辑思路一致，只是语法不同：

父组件（App.js） #

import React, { Component } from 'react';
import FormComponent from './FormComponent';
import CardComponent from './CardComponent';

class App extends Component {
  state = {
    formData: null
  };

  handleFormSubmit = (data) => {
    this.setState({ formData: data });
  };

  render() {
    return (
      <div style={{ padding: '20px' }}>
        <FormComponent onSubmit={this.handleFormSubmit} />
        {this.state.formData && <CardComponent data={this.state.formData} />}
      </div>
    );
  }
}

export default App;

表单组件（FormComponent.js） #

import React, { Component } from 'react';

class FormComponent extends Component {
  state = {
    name: '',
    email: ''
  };

  handleChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.onSubmit(this.state);
    this.setState({ name: '', email: '' });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
        <div>
          <label>姓名：</label>
          <input
            type="text"
            name="name"
            value={this.state.name}
            onChange={this.handleChange}
            required
            style={{ marginLeft: '8px' }}
          />
        </div>
        <div>
          <label>邮箱：</label>
          <input
            type="email"
            name="email"
            value={this.state.email}
            onChange={this.handleChange}
            required
            style={{ marginLeft: '8px' }}
          />
        </div>
        <button type="submit" style={{ width: '100px' }}>提交</button>
      </form>
    );
  }
}

export default FormComponent;

三、新手易踩的坑 #

• 忘记阻止表单默认行为：表单提交会默认刷新页面，必须调用e.preventDefault()
• 状态更新异步性：React状态更新是异步的，不要在调用setFormData后立刻获取最新值
• 未做条件渲染：如果初始formData为null，直接传递给卡片组件会导致报错，需用{formData && ...}做判断
• 类组件方法绑定错误：类组件中如果不用箭头函数定义方法，需在构造函数中手动绑定this

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