cari

Rumah  >  Soal Jawab  >  teks badan

Fokus tidak bergerak selepas menggunakan cangkuk useRef dalam tindak balas

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>

P粉358281574P粉358281574235 hari yang lalu471

membalas semua(1)saya akan balas

  • P粉828463673

    P粉8284636732024-04-03 19:38:35

    useEffect 需要依赖于 barcodeRef anda, 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]);
    

    balas
    0
  • Batalbalas