Reactjs: Как отредактировать таблицу на указанной c строке?

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

Я хотел бы нажать кнопку «Изменить» в строке таблицы, и текстовое поле появляется только в указанной c строке, но здесь, когда я нажимаю на нее, появляется текстовые поля вместо этого появляются в других строках. Что здесь не так?

Answer 1

Не знаю, почему ваш код так выглядит сложным. Лично я думаю, что для достижения своих целей вы можете упростить следующее:

• Просто сохраните идентификатор, который вы редактируете:

const [editingId, setId] = useState();

• Установите редактирование Идентификатор при нажатии на кнопку редактирования:

const handleEdit = (id) => {
  setId(id);
}

• Проверьте условие, чтобы отобразить ввод текста в вашем JSX:

{editingId === row.id ? 
  <TableCell>
    <TextField id="outlined-basic" size="small" variant="outlined" />
  </TableCell> :
  <TableCell>{row.qty}</TableCell> 
}

необходимо обработать, чтобы обновить список неизменным способом, поскольку вы также закончили редактирование.