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

在完成编辑后，您可能还必须以不可变的方式来处理列表。

React.js：如何在特定行上编辑表？

1 个答案: