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

Question

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>

Answer 1

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