Reactjs：如何在特定行上编辑表格？答案

【问题标题】：Reactjs: How to edit table on specific row?Reactjs：如何在特定行上编辑表格？
【发布时间】：2020-11-27 08:38:12
【问题描述】：

这是我的代码：

const [data, setData] = useState([
    {id: 1, name: 'paper', qty: 10},
    {id: 2, name: 'bottle', qty: 10},
 ]);

 const [isEditable, setEditable] = useState([]);

 useEffect(()=>{
   data.map(each=>{
     isEditable[each.id] = false;
   })
 })
 
  const handleEdit = (id) => {
     var arr = data;
     arr[id] = !arr[id];
     setEditable(arr);
  }
  return (
    <div>
         {data.map((row) => (
          <TableRow key={row.id}>
            <TableCell>{row.id}</TableCell>
            <TableCell>{row.name}</TableCell>
            { isEditable[row.id] ? 
              <TableCell>
                <TextField id="outlined-basic" size="small" variant="outlined" />
              </TableCell> :
              <TableCell>{row.qty}</TableCell> 
            }
            <TableCell>
                <button onClick={()=> handleEdit(row.id)}> Edit </button>
            </TableCell>                                            
          </TableRow>
        ))}

    </div>
  )
}

我想点击表格行上的编辑按钮，文本字段只出现在特定的行上，但是当我点击它时，文本字段会出现在其他行上。这里有什么问题？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

不知道为什么您的代码看起来很复杂。就我个人而言，我认为您可以通过以下方式更简单地实现您的目标：

只需存储您正在编辑的 id：

const [editingId, setId] = useState();

在单击编辑按钮时设置编辑 ID：

const handleEdit = (id) => {
  setId(id);
}

检查条件以在 JSX 中显示文本输入：

{editingId === row.id ? 
  <TableCell>
    <TextField id="outlined-basic" size="small" variant="outlined" />
  </TableCell> :
  <TableCell>{row.qty}</TableCell> 
}

您可能还必须在完成编辑后以不可变的方式更新列表。

【讨论】：