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>
您的
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]);