如何在React JS中实现动态输入框的值编辑与已存内容修改

现有代码的核心问题 #

• 草稿输入框的变更逻辑完全错误：原handleChange更新状态时，直接用当前编辑的单条对象覆盖了整个input数组，会把已经添加的其他输入框全部冲掉，根本没办法同时维护多个输入框的独立值。比如加了两个输入框，改第二个的时候第一个的状态直接就丢失了。
• 已保存的输入框是非受控的：展示已保存内容的输入框只用了defaultValue传初始值，没有绑定任何状态更新逻辑，在输入框里修改的内容根本不会同步回data状态，自然改完也存不住。
• 状态更新没做隔离：不管是草稿区还是已保存区，更新数组的时候都没有通过唯一标识/索引定位要修改的项，全量替换数组的写法很容易引发数据丢失。

具体实现步骤 #

• 给所有输入项绑定唯一id：新增输入框的时候同步生成一个不会重复的标识（比如用时间戳拼接随机数），不要靠数组索引当key，避免列表变动的时候渲染错乱。
• 拆分独立的变更处理逻辑：分别给草稿区、已保存区的输入框写对应的更新方法，更新状态时先浅拷贝原有数组，只修改匹配到的那一项的value，不改动其他项的内容，保证多个输入框的状态相互独立。
• 把已保存的输入框改成受控组件：输入框的value直接绑定data数组里对应项的值，输入过程中实时触发状态更新，修改的内容直接存在data里，下方的文本展示区会自动同步替换成新值，不需要额外点保存按钮就能完成更新。
• 整合重复渲染逻辑：原代码里data数组被连续遍历三次做重复渲染的部分可以合并，减少不必要的渲染开销。

修正后的可运行核心代码 #

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

export default function App() {
  // 待保存的草稿输入框列表
  const [draftInputs, setDraftInputs] = useState([{ id: Date.now(), value: "" }]);
  // 已保存的正式输入项列表
  const [savedData, setSavedData] = useState([]);

  // 处理草稿区输入框内容变更
  const handleDraftChange = (index, e) => {
    // 浅拷贝草稿数组，不直接修改原状态
    const updatedDrafts = [...draftInputs];
    updatedDrafts[index].value = e.target.value;
    setDraftInputs(updatedDrafts);
  };

  // 新增草稿输入框
  const handleAddDraft = () => {
    setDraftInputs(prev => [
      ...prev,
      { id: Date.now() + Math.random(), value: "" }
    ]);
  };

  // 把草稿区有效内容保存到正式列表
  const handleSaveDrafts = () => {
    // 过滤掉全是空格的无效内容
    const validDrafts = draftInputs.filter(item => item.value.trim() !== "");
    if (validDrafts.length === 0) return;
    setSavedData(prev => [...prev, ...validDrafts]);
    // 清空草稿区，留一个空输入框准备下一次输入
    setDraftInputs([{ id: Date.now(), value: "" }]);
  };

  // 处理已保存内容的编辑变更
  const handleSavedChange = (itemId, e) => {
    const updatedSaved = savedData.map(item => {
      // 按id匹配到要修改的项，只更新这一项的内容
      if (item.id === itemId) return { ...item, value: e.target.value };
      return item;
    });
    setSavedData(updatedSaved);
  };

  return (
    <div className="App">
      <button type="button" className="btn" onClick={handleAddDraft}>
        Add Input fields
      </button>

      {/* 草稿输入框区域 */}
      {draftInputs.map((input, idx) => (
        <div key={input.id}>
          <input
            type="text"
            placeholder="Enter text"
            onChange={(e) => handleDraftChange(idx, e)}
            value={input.value}
          />
        </div>
      ))}

      <h2>Display Added Fields and Edit</h2>
      {/* 可编辑的已保存内容区域 */}
      {savedData.map(item => (
        <div key={item.id}>
          <input
            type="text"
            value={item.value}
            onChange={(e) => handleSavedChange(item.id, e)}
          />
        </div>
      ))}

      <button className="btn" onClick={handleSaveDrafts}>Save</button>

      {/* 纯文本展示区域 */}
      <div style={{ marginTop: "20px" }}>
        {savedData.map(item => (
          <div key={item.id}>{item.value}</div>
        ))}
      </div>
    </div>
  );
}

调整说明：如果不需要编辑实时生效，只需要在失焦的时候才更新已保存的内容，可以把已保存区输入框的onChange改成onBlur触发，或者把value改回defaultValue，在事件触发时把修改后的值同步到state即可。

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