在React中提交表单时呈现数据

在React中提交表单时呈现数据涉及以下几个基础概念：

基础概念

组件状态（State）：React组件内部的数据存储，用于管理组件的动态数据。
事件处理（Event Handling）：处理用户交互，如表单提交。
受控组件（Controlled Components）：表单元素的值由React组件的状态控制。

类型与应用场景

简单表单：如登录、注册页面。
复杂表单：如多步骤表单、动态添加/删除字段的表单。

示例代码

以下是一个简单的React组件示例，展示如何在提交表单时呈现数据：

import React, { useState } from 'react';

function FormComponent() {
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form Data Submitted:', formData);
    // 这里可以添加提交数据的逻辑，比如发送到服务器
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>Email:</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default FormComponent;