Javascript Reactjs中的可编辑表

这是我的代码：

export default function Test2() {
  const [isEditable, setEditable] = useState(false);
  const [qty, setQty] = useState();

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

 const handleEdit = () => {
    setEditable(!isEditable);
 }

 const handleChange = (e) =>{
    setQty(e.target.value);
 }

 const handleEnter = (e, f) =>{
  if(e.key === 'Enter'){
    let newArr = data.map((obj) => {
      if (obj.id == f) {
          obj.qty = qty;
      }
      return obj;                           
    })
    setData(newArr);
    setEditable(!isEditable);
  }
}
  return (
    <div>
         {data.map((row) => (
          <TableRow key={row.id}>
            <TableCell>{row.id}</TableCell>
            <TableCell>{row.name}</TableCell>
            { isEditable ? 
              <TableCell>
                <TextField id="outlined-basic" size="small" variant="outlined" 
                 onChange=`{handleChange}`
                onKeyPress={(e)=> {handleEnter(e, row.id)}}/>
              </TableCell> :
              <TableCell>{row.qty}</TableCell> 
            }
            <TableCell>
                <button onClick={()=> handleEdit()}> Edit </button>
            </TableCell>                                            
          </TableRow>
        ))}

    </div>
  )
}

导出默认函数Test2（）{
常量[IsEdit，setEditable]=useState（false）；
const[qty，setQty]=useState（）；
const[data，setData]=useState([
{id:1，名称：'纸张'，数量：10}，
{id:2，名称：'瓶'，数量：10}，
]);
常量handleEdit=（）=>{
setEditable（！isEditable）；
}
常数handleChange=（e）=>{
设置数量（即目标值）；
}
常数handleEnter=（e，f）=>{
如果（e.key=='Enter'）{
让newArr=data.map（（obj）=>{
if（obj.id==f）{
对象数量=数量；
}
返回obj；
})
setData（newArr）；
setEditable（！isEditable）；
}
}
返回(
{data.map（（行）=>(
{row.id}
{row.name}
{可编辑？
{handleEnter（e，row.id）}/>
:
{行数量}
}
handleEdit（）}>编辑
))}
)
}

---

这里有一个可编辑的表格，当我点击

Edit

按钮时，

textfield

将替换输入值的

qty

。但问题是，当我单击

按钮时，
文本字段将显示在所有表行中。我怎样才能使它仅出现在我单击该行上的编辑
按钮的位置。
您需要维护所有数据的所有状态。之后，当您单击“编辑”按钮时，需要将row.id作为参数传递给handleEdit（），以更改该特定元素的isEditable状态

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

const [isEditable, setEditable] = useState(() => {
var obj = {};
data.forEach((each) => {
  obj[each.id] = false;
});

 const handleEdit = (id) => {
    var isEditableCopy = isEditable;
    isEditableCopy[id] = !isEditableCopy[id];
    setEditable(isEditableCopy);
 }

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" 
                 onChange=`{handleChange}`
                onKeyPress={(e)=> {handleEnter(e, row.id)}}/>
              </TableCell> :
              <TableCell>{row.qty}</TableCell> 
            }
            <TableCell>
                <button onClick={()=> handleEdit(row.id)}> Edit </button>
            </TableCell>                                            
          </TableRow>
        ))}

    </div>
  )

const[data，setData]=useState([
{id:1，名称：'纸张'，数量：10}，
{id:2，名称：'瓶'，数量：10}，
]);
常量[IsEdit，setEditable]=useState（（）=>{
var obj={}；
data.forEach（（每个）=>{
obj[each.id]=false；
});
const handleEdit=（id）=>{
var isEditableCopy=isEditable；
isEditableCopy[id]=！isEditableCopy[id]；
setEditable（isEditableCopy）；
}
返回(
{data.map（（行）=>(
{row.id}
{row.name}
{isEditable[row.id]？
{handleEnter（e，row.id）}/>
:
{行数量}
}
handleEdit（row.id）}>编辑
))}
)
仍然不起作用。当我单击第一个编辑按钮时，其他行将消失。