Как сделать редактируемую таблицу?

Question

Это мой код:

import React, {useState} from 'react';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
.
.
export default function test(props) {
    const [data, setData] = useState([
       {id: 1, name: 'paper', qty: 10},
       {id: 2, name: 'bottle', qty: 10},
    ]);

    const handleEdit = () => {
           ....
    }
return (
<div>
   {data.map((row) => (
      <TableRow>
         <TableCell>{row.id}</TableCell>
         <TableCell>{row.name}</TableCell>
         <TableCell>{row.qty}</TableCell>
         <TableCell>
            <Button onClick={()=> handleEdit()}> <EditIcon/> </Button>
          </TableCell>                                            
      </TableRow>
     ))}
 </div>
  )
}

Я хотел бы сделать поле qty редактируемым в указанной строке c в таблице, щелкнув EditIcon. Каким должен быть handleEdit()?

Answer 1

заменяет поле количества на поле ввода при нажатии кнопки. при изменении импорта обновите поле qyt при нажатии Enter внутри поля ввода, снова замените поле ввода на div

Answer 2

используйте флаг isEditable для сохранения состояния.

const [isEditable, setEditable] = useState(false)

Затем внутри handleEdit () переключите значение

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

и внутри рендеринга, условно визуализируйте значение ячейки или поле ввода.

{ isEditable ? 
  <TableCell><input type=text /></TableCell> :
  <TableCell>{row.qty}</TableCell> 
}

Answer 3

Да, вы можете вызвать функцию handleEdit () при щелчке по количеству. Возьмите для этого поле ввода. и включайте его, только когда пользователь нажимает на кол-во. В противном случае он отключен и доступен только для чтения.