Ini adalah kod saya di mana saya mendapat rujukan kepada elemen semasa yang ingin saya fokuskan, tetapi fokus tidak pergi ke elemen itu.
useEffect(() => {
setTimeout(() => {
console.log("This is current barcode ref inside", barcodeRef.current);
barcodeRef.current && barcodeRef.current.focus();
}, 500)
//barcodeRef.current && barcodeRef.current.focus();
}, [tableData]);
Ini juga cara saya merujuk elemen input yang ingin saya fokuskan.
{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>
))}
Saya juga cuba menggunakan useLayoutEffect, tetapi tidak berjaya. Dalam konsol saya mendapat elemen input yang betul yang saya mahu fokuskan.
<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>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
useEffect需要依赖于barcodeRefanda, seperti yang ditunjukkan di bawah: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]);