React中实现多次输入提交后展示内容并添加弹窗提示

这需求用React的状态管理就能搞定，核心是用数组存储每次提交的内容，循环渲染列表，同时触发弹窗提示。下面是完整的实现代码：

import { useState } from 'react';

function StudentList() {
  // 存储当前输入框的值
  const [inputValue, setInputValue] = useState('');
  // 存储所有提交的学生姓名
  const [students, setStudents] = useState([]);

  // 处理输入框内容变化
  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  // 处理提交逻辑
  const handleSubmit = () => {
    // 空输入不处理
    if (!inputValue.trim()) return;
    
    // 将输入的名字转为小写（按需调整，比如首字母大写）
    const formattedName = inputValue.toLowerCase();
    // 更新学生列表，把新名字加进去
    setStudents(prevStudents => [...prevStudents, formattedName]);
    // 弹窗提示
    alert(`已添加学生：${formattedName}`);
    // 清空输入框
    setInputValue('');
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
        placeholder="输入学生姓名"
      />
      <button onClick={handleSubmit}>提交</button>

      {/* 渲染所有提交的学生 */}
      <div className="student-list">
        {students.map((name, index) => (
          <p key={index}>Student's name: {name}</p>
        ))}
      </div>
    </div>
  );
}

export default StudentList;

关键逻辑说明： #

• 用useState维护两个状态：inputValue跟踪输入框当前内容，students数组存储所有提交过的姓名。
• 提交时先做空值校验，避免添加空内容；然后用扩展运算符[...prevStudents, formattedName]更新数组，保证状态不可变。
• 弹窗用原生alert实现，也可以替换成UI库的模态框（比如Antd的Modal），逻辑完全一致。
• 渲染列表时用map循环，给每个项加唯一的key（这里用索引，实际项目如果有业务唯一ID更好）。

如果需要首字母大写的格式，把formattedName改成inputValue.charAt(0).toUpperCase() + inputValue.slice(1).toLowerCase()就行。

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