Редактируемая таблица в Reactjs

Question

Это мой код:

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

Здесь у меня есть редактируемая таблица, которая, когда я нажимаю кнопку Edit, textfield заменяет qty входным значением. Но проблема в том, что когда я нажимаю button, textfields появляется во всех строках таблицы. Как я могу просто сделать так, чтобы оно появилось там, где я нажимаю кнопку редактирования button только в этой строке.

Answer 1

Вам необходимо поддерживать все состояния всех ваших данных. После этого, когда вы нажимаете кнопку редактирования, вам нужно передать 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>
  )