React中如何在映射列表项内点击按钮渲染单个输入框？

核心思路是通过状态管理当前处于编辑状态的列表项标识，结合条件渲染控制仅目标项显示输入框，具体实现步骤如下：

1. 初始化编辑状态 #

用useState保存当前正在编辑的列表项唯一ID，初始值设为null表示无项处于编辑状态：

import { useState } from 'react';

function YourComponent() {
  const [editingItemId, setEditingItemId] = useState(null);
  // 假设stuffforlist是数组，每个项包含唯一id和内容字段
  const stuffforlist = [
    { id: 1, something: "列表项1" },
    { id: 2, something: "列表项2" },
    // 可添加更多列表项
  ];

2. 绑定按钮点击逻辑 #

给每个“重命名”按钮绑定点击事件，点击时切换当前编辑项的ID（若点击已编辑项则取消编辑）：

const handleRenameToggle = (itemId) => {
  setEditingItemId(prevId => prevId === itemId ? null : itemId);
};

3. 条件渲染输入框 #

遍历列表时，判断当前项ID是否等于editingItemId，根据状态切换显示输入框或原内容：

return (
  <div>
    {stuffforlist.map(stuff => (
      <div key={stuff.id}>
        {/* 编辑状态显示输入框，否则显示原内容 */}
        {editingItemId === stuff.id ? (
          <input 
            type="text" 
            defaultValue={stuff.something}
            // 可选：添加失焦/回车退出编辑的逻辑
            onBlur={() => setEditingItemId(null)}
            onKeyDown={(e) => e.key === 'Enter' && setEditingItemId(null)}
          />
        ) : (
          <span>{stuff.something}</span>
        )}
        <button onClick={() => handleRenameToggle(stuff.id)}>
          {editingItemId === stuff.id ? '取消' : '重命名'}
        </button>
      </div>
    ))}
  </div>
);
}

export default YourComponent;

关键细节说明 #

• 唯一Key值：必须给列表项的外层div添加key属性，取值为项的唯一ID，这是React列表渲染的硬性要求，避免渲染异常。
• 单状态控制：用单个editingItemId变量就能确保同一时间只有一个列表项处于编辑状态，精准匹配需求。
• 交互优化：可给输入框添加失焦确认、回车保存等逻辑，让编辑流程更流畅。

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