React에서 렌더링한 후 입력 필드에 포커스를 설정하는 방법은 무엇입니까?

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

React는 구성 요소가 렌더링된 후 입력 필드에 포커스를 설정하는 여러 가지 방법을 제공합니다.

옵션 1: 참조

문서에 언급된 대로 다음을 수행할 수 있습니다. ref를 사용하여 입력 필드의 DOM 노드에 액세스합니다. 이는 렌더링 함수의 입력 필드에 ref 속성을 설정하여 수행할 수 있습니다.

<input ref="nameInput" ... />

그런 다음 구성 요소가 마운트된 후 DOM 노드의 focus() 메서드를 사용하여 포커스를 설정할 수 있습니다. :

componentDidMount() {
  this.refs.nameInput.getInputDOMNode().focus();
}

옵션 2: 자동 초점

마운트 시 입력이 자동으로 초점을 맞추도록 하는 autoFocus 소품:

<input autoFocus name=... />

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

둘 중 하나를 활용하여 이러한 옵션 중 렌더링 후 특정 텍스트 필드에 쉽게 초점을 설정하여 사용자 편의를 보장하고 사용자 경험을 향상시킬 수 있습니다.

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