Heim  >  Fragen und Antworten  >  Hauptteil

Der Fokus bewegt sich nicht, nachdem der useRef-Hook in React verwendet wurde

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粉358281574P粉358281574222 Tage vor444

Antworte allen(1)Ich werde antworten

  • P粉828463673

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

    Antwort
    0
  • StornierenAntwort