如何在React表单中同时弹窗显示多个输入值？

问题定位 #

你遇到的提交无反应问题，大概率是修改alert内容时出现了模板字符串语法错误（比如未正确闭合反引号、换行格式错误等），导致handleSubmit函数执行报错中断。另外你的代码存在大量冗余的状态管理和事件处理函数，也增加了出错概率。

快速修复方案 #

先修正handleSubmit中的alert语法，确保所有字段都正确嵌入模板字符串：

const handleSubmit = (e) => {
  e.preventDefault();
  alert(`Full Name: ${name}
E-mail: ${email}
Telephone: ${telephone}
Institution: ${institution}
Course: ${course}
Graduation Year: ${year}
Company: ${company}
Job Position: ${job}
Experience: ${experience}`);
}

修改后弹窗即可正常显示所有字段内容。

代码优化（推荐） #

你当前为每个输入框单独编写useState和onChange函数，代码冗余且不易维护。可以将所有表单状态合并为一个对象，用单个handleChange函数处理所有输入：

import { useState } from "react";
import './styles/styles.css';

function App() {
  // 合并所有表单状态为一个对象
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    telephone: '',
    institution: '',
    course: '',
    year: '',
    company: '',
    job: '',
    experience: ''
  });

  // 单个handleChange处理所有输入
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    const { name, email, telephone, institution, course, year, company, job, experience } = formData;
    alert(`Full Name: ${name}
E-mail: ${email}
Telephone: ${telephone}
Institution: ${institution}
Course: ${course}
Graduation Year: ${year}
Company: ${company}
Job Position: ${job}
Experience: ${experience}`);
  }

  return (
    <div className="form-container">
      <form onSubmit={handleSubmit} className="cv-form">
        <input 
          className="form-field"
          placeholder="Full Name..."
          name="name" // 设置name属性与state中的key对应
          value={formData.name}
          onChange={handleChange} 
        />
        <input 
          className="form-field"
          placeholder="E-mail Address..."
          name="email"
          value={formData.email}
          onChange={handleChange} 
        />
        <input 
          className="form-field"
          placeholder="Telephone Number..."
          name="telephone"
          value={formData.telephone}
          onChange={handleChange} 
        />
        <input 
          className="form-field"
          placeholder="Institution's Name..."
          name="institution"
          value={formData.institution}
          onChange={handleChange}
        />
        <input 
          className="form-field"
          placeholder="Course's Name..."
          name="course"
          value={formData.course}
          onChange={handleChange}
        />
        <input 
          className="form-field"
          placeholder="Year of Graduation..."
          name="year"
          value={formData.year}
          onChange={handleChange}
        />
        <input 
          className="form-field"
          placeholder="Company's Name..."
          name="company"
          value={formData.company}
          onChange={handleChange}
        />
        <input 
          className="form-field"
          placeholder="Job Position..."
          name="job"
          value={formData.job}
          onChange={handleChange}
        />
        <input 
          className="form-field"
          placeholder="Years of Experience..."
          name="experience"
          value={formData.experience}
          onChange={handleChange}
        />
        <input type="submit" value="Submit CV!"/>
      </form>
    </div>
  )
}

export default App;

优化说明 #

1. 合并状态：用formData对象存储所有表单字段，减少useState的重复调用。
2. 统一事件处理：通过e.target.name匹配对应状态字段，单个handleChange函数处理所有输入框的变化，简化代码结构。
3. 简化提交逻辑：提交时直接从formData中解构所需字段，逻辑更清晰易读。

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