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> 

}

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