React中如何实现点击图标仅在数组指定索引行显示输入框？

问题出在你用了一个布尔值showComment控制所有行的显示状态，自然会同步切换所有行。改成存储当前要编辑的行索引就能实现单行独立控制：

1. 把状态从布尔值改成存储索引（初始值设为null，表示没有行处于编辑状态）：

const [editingRowIndex, setEditingRowIndex] = useState(null);

2. 修改渲染逻辑，判断当前行的索引是否等于editingRowIndex，相等就显示输入框，否则显示原有评论：

{data.map((value, index) => (
  <div key={index} className="table-row">
    {/* 评论显示/编辑区域 */}
    {editingRowIndex === index ? (
      <input 
        type="text" 
        placeholder="Enter comment"
        defaultValue={value.comment} // 回显该行原有评论内容
      />
    ) : (
      <div>{value.comment}</div>
    )}

    {/* 点击图标切换当前行的编辑状态 */}
    <div onClick={() => {
      // 点击已编辑的行就取消编辑，否则切换到该行编辑
      setEditingRowIndex(editingRowIndex === index ? null : index);
    }}>
      <Icon />
    </div>
  </div>
))}

额外提示 #

如果你的数据会动态增删，建议用每条数据的唯一标识（比如给每个对象加id字段）代替index作为判断依据，避免索引混乱导致的错误。

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