React.js中如何保存并展示用户输入的文本？

你的代码核心问题在于只用了单个状态管理输入框内容，且SaveInput函数的写法错误（直接操作document.innerText并赋值给setInput不符合React状态管理逻辑）。要实现保存输入内容并展示，需要额外维护一个状态来存储已提交的条目列表，具体修正如下：

修正后的完整代码 #

import React, { useState } from "react";
import "./ToDo.css";

const ToDo = () => {
  // 管理输入框当前值的状态
  const [input, setInput] = useState('');
  // 管理已保存的所有输入条目
  const [savedItems, setSavedItems] = useState([]);

  // 实时更新输入框状态
  const handleInputChange = (event) => {
    setInput(event.target.value);
  }

  // 保存当前输入内容到列表
  const saveInput = () => {
    // 过滤空内容
    if (input.trim()) {
      // 基于原列表添加新条目
      setSavedItems(prevItems => [...prevItems, input]);
      // 清空输入框
      setInput('');
    }
  }

  // 清空所有已保存的条目
  const clearAllItems = () => {
    setSavedItems([]);
  }

  // 清空当前输入框内容
  const clearInput = () => {
    setInput('');
  }

  return(
    <div>
      <input type="text" value={input} onChange={handleInputChange} placeholder="输入内容..."/>
      <button onClick={saveInput}>✓ 保存</button>
      <button onClick={clearInput}>X 清空输入</button>
      <button onClick={clearAllItems}>🗑️ 清空所有</button>
      <br/><br/>
      <h3>已保存内容：</h3>
      <ul>
        {/* 遍历已保存条目，渲染到页面 */}
        {savedItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default ToDo;

关键逻辑说明 #

• 双状态分工：input负责同步输入框的实时内容，savedItems负责存储所有用户提交的文本，两者职责明确，避免状态混乱。
• 正确的保存逻辑：点击保存按钮时，先判断输入内容非空，再通过展开运算符[...prevItems, input]创建新列表（React状态更新不可直接修改原数组），最后清空输入框提升用户体验。
• 列表渲染：使用map遍历savedItems数组，每个列表项需添加唯一key（这里用索引，生产环境建议用唯一ID），将已保存内容逐个展示。

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