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) => {&nbsp; setId(id);}检查在 JSX 中显示文本输入的条件：{editingId === row.id ?&nbsp;&nbsp; <TableCell>&nbsp; &nbsp; <TextField id="outlined-basic" size="small" variant="outlined" />&nbsp; </TableCell> :&nbsp; <TableCell>{row.qty}</TableCell>&nbsp;}当您也完成编辑时，您可能必须处理以不可变的方式更新列表。