렌더링 후 React에서 입력 필드에 초점을 맞추는 방법은 무엇입니까?

React 사후 렌더링에서 입력 필드에 초점 맞추기

React에서는 렌더링 후 입력 필드에 초점을 맞추는 방법을 다양한 방법으로 구현할 수 있습니다. .

한 가지 접근 방식은 문서에 제안된 대로 참조를 활용하는 것입니다. 렌더 함수(예: "nameInput") 내의 입력 필드에 참조를 할당하면 해당 DOM 노드에 액세스하고 포커스 메서드를 수동으로 호출할 수 있습니다. 그러나 이 함수를 언제 어디서 호출할지 이해하는 것이 중요합니다.

포커스 함수 호출

포커스 함수를 호출하는 가장 간단한 위치는 구성 요소의 componentDidMount 수명 주기 메서드입니다. . 이렇게 하면 구성 요소가 DOM에 마운트된 후에 포커스가 설정됩니다. 코드는 다음과 같습니다:

import React, { useRef, useEffect } from "react";

const MyComponent = () => {
  const nameInputRef = useRef();

  useEffect(() => {
    if (nameInputRef.current) {
      nameInputRef.current.focus();
    }
  }, []);

  return (
    <input ref={nameInputRef} name="..." />
  );
};

export default MyComponent;

자동 초점 옵션

또는 React에서 제공하는 autoFocus 소품을 활용할 수도 있습니다. 입력 필드에서 이 prop을 true로 설정하면 구성 요소가 마운트 시 자동으로 포커스를 얻습니다.

return (
  <input autoFocus name="..." />
);

JSX에서 속성은 경우와 달리 autoFocus(대문자 F 사용)입니다. 민감하지 않은 HTML 속성.

위 내용은 렌더링 후 React에서 입력 필드에 초점을 맞추는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!