렌더링 후 React의 입력 필드에 초점을 설정하는 방법은 무엇입니까?

React의 렌더링 후 입력 필드에 포커스 설정

컴포넌트 렌더링 후 특정 입력 필드에 포커스 설정은 React의 심판 시스템. "ref" 속성을 사용하여 입력 필드에 참조를 할당하면 해당 DOM 노드에 액세스할 수 있어 포커스 상태를 조작할 수 있습니다.

문서에서 언급한 대로 "라는 이름의 참조를 설정할 수 있습니다. nameInput"을 렌더링 기능 중에 입력 필드에 추가합니다. 그러나 중요한 질문은 "focus()" 메소드를 어디에서 호출해야 하는가입니다.

최적의 호출 지점

최적의 결과를 얻으려면 "this"를 호출해야 합니다. .refs.nameInput.getInputDOMNode().focus()" 메서드는 "comComponentDidMount" 수명 주기 메서드 내에서 사용됩니다. 이 메소드는 구성요소가 마운트되어 DOM에 삽입된 직후에 호출됩니다. 여기에서 focus 메서드를 호출하면 구성 요소가 표시되자마자 포커스가 설정되도록 할 수 있습니다.

대체 옵션

@Dhiraj의 솔루션은 다음과 같은 대체 접근 방식을 제공합니다. "autoFocus" 소품을 활용합니다. 이 prop을 true로 설정하면 입력 필드가 마운트될 때 자동으로 초점을 맞추도록 지시합니다. 다음과 같이 사용할 수 있습니다.

<input autoFocus name=... />

대소문자를 구분하지 않는 HTML과 달리 JSX에서는 "autoFocus"를 대문자로 사용해야 합니다. "autoFocus".

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