Reactjs：如何编辑特定行上的表格？

Question

这是我的代码：

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>
  )
}

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

Answer 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> 
}

当您完成编辑时，您可能必须以不可变的方式更新列表。