Heim > Fragen und Antworten > Hauptteil
Dies ist mein Code, in dem ich einen Verweis auf das aktuelle Element erhalte, auf das ich mich konzentrieren möchte, der Fokus jedoch nicht auf dieses Element geht.
useEffect(() => { setTimeout(() => { console.log("This is current barcode ref inside", barcodeRef.current); barcodeRef.current && barcodeRef.current.focus(); }, 500) //barcodeRef.current && barcodeRef.current.focus(); }, [tableData]);
So verweise ich auch auf das Eingabeelement, auf das ich mich konzentrieren möchte.
{tableData.map((row, rowIndex) => ( <TableRow key={rowIndex}> {columns.map( (column) => !column.hidden && ( <TableCell key={column.accessorKey} style={{ width: column.width }} > {column.accessorKey === "ItemName" ? ( <Input value={row[column.accessorKey] || ""} onChange={(event) => handleLeaveItem( rowIndex, column.accessorKey, event.target.value ) } /> ) : ( <Input ref={column.accessorKey === "Barcode" ? barcodeRef : null}//reference to the input of barcode column in table row value={row[column.accessorKey] || ""} onChange={(event) => handleSaveCell( rowIndex, column.accessorKey, event.target.value ) } /> )} </TableCell> ) )} <TableCell> <IconButton onClick={() => handleRemoveRow(rowIndex)}> <Delete /> </IconButton> </TableCell> </TableRow> ))}
Ich habe es auch mit useLayoutEffect versucht, aber ohne Erfolg. In der Konsole erhalte ich das richtige Eingabeelement, auf das ich mich konzentrieren möchte.
<div class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary css-10tgus4-MuiInputBase-root-MuiInput-root"> ::before <input type="text" class="MuiInputBase-input MuiInput-input css-ume8vi-MuiInputBase-input-MuiInput-input" value> ::after </div>
P粉8284636732024-04-03 19:38:35
您的 useEffect
需要依赖于 barcodeRef
,如下所示:
useEffect(() => { const timeout = setTimeout(() => { console.log("This is current barcode ref inside", barcodeRef.current); barcodeRef.current && barcodeRef.current.focus(); }, 500) return () => clearTimeout(timeout); }, [tableData, barcodeRef]);