React中如何为每个输入框动态设置输入值，避免值重复？

你的问题根源在于所有列表项的输入框都绑定了同一个全局状态newRowValue，所以输入时所有输入框会同步显示相同内容。同时原代码的DOM结构不合理——每个列表项里都嵌套了新增表单，这完全没必要，新增功能应该独立于现有列表项。

下面是修复后的完整代码：

import { useState } from 'react';
import { v4 as uuid } from 'uuid';
// 假设你的Input和Button组件是已经定义好的
import Input from './Input';
import Button from './Button';

export default function App() {
  const [list, setList] = useState([
    {
      id: uuid(),
      name: "",
      isRemovable: true,
    },
  ]);
  // 仅用于新增行的输入值
  const [newRowValue, setNewRowValue] = useState("");

  // 删除指定id的项
  const removeItem = (removeId) => {
    setList(prevState => prevState.filter(({ id }) => id !== removeId));
  };

  // 更新指定id的项的name值
  const updateItemName = (itemId, newName) => {
    setList(prevState => 
      prevState.map(item => 
        item.id === itemId ? { ...item, name: newName } : item
      )
    );
  };

  // 新增行
  const addNewRowItem = (e) => {
    e.preventDefault();
    if (!newRowValue.trim()) return; // 空值不新增
    setList(prevState => [
      ...prevState,
      {
        id: uuid(),
        name: newRowValue,
        isRemovable: true,
      },
    ]);
    setNewRowValue(""); // 清空新增输入框
  };

  return (
    <div className="app">
      {/* 新增行的表单，独立于现有列表 */}
      <form className="uk-card uk-card-default uk-card-body" onSubmit={addNewRowItem}>
        <Input
          placeholder="输入新行内容..."
          value={newRowValue}
          handleChange={(e) => setNewRowValue(e.target.value)}
        />
        <Button
          className="uk-margin-small-left"
          color="secondary"
          type="submit"
        >
          Add Row
        </Button>
      </form>

      {/* 渲染现有列表项 */}
      {list.length > 0 ? (
        list.map(({ id, name, isRemovable }) => (
          <div className="uk-card uk-card-default uk-card-body" key={id}>
            <Input
              placeholder="编辑当前行内容..."
              value={name}
              handleChange={(e) => updateItemName(id, e.target.value)}
            />
            {isRemovable && (
              <Button
                className="uk-margin-small-left"
                color="danger"
                type="button"
                handleClick={() => removeItem(id)}
              >
                Remove
              </Button>
            )}
          </div>
        ))
      ) : (
        <div>(Empty List)</div>
      )}
    </div>
  );
}

关键改动说明： #

• 拆分新增与编辑功能：把新增行的输入框和按钮单独放在一个表单里，和现有列表项分离，避免结构混乱。
• 每个列表项绑定自身状态：列表项的输入框绑定当前项的name字段，通过updateItemName函数，根据id精准更新对应项的内容，实现输入框独立。
• 移除冗余结构：删掉了原代码中每个列表项内部的新增表单，简化DOM结构。
• 新增空值判断：新增行时先判断输入值是否为空，避免添加空内容的行。

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