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

React.js中的可编辑表

1 个答案: