>  기사  >  웹 프론트엔드  >  React에서 입력 필드 포커스를 설정하는 방법은 무엇입니까?

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

Susan Sarandon
Susan Sarandon원래의
2024-11-04 03:56:29872검색

How to Set Input Field Focus in React?

React에서 입력 필드 포커스 설정

React 애플리케이션 내에서 사용자 상호 작용을 관리할 때 특정 입력 필드에 초점을 맞춰야 하는 경우가 종종 있습니다. 페이지 렌더링 후. 이를 달성하는 최선의 방법에 대한 의문이 생깁니다.

React 문서에서는 refs 사용을 권장합니다. 그렇게 하려면 렌더링 함수 내에서 "nameInput"과 같은 입력 필드에 ref 속성을 연결하세요. 그런 다음 "this.refs.nameInput.getInputDOMNode().focus();" 메서드를 호출할 수 있습니다. 입력 필드에 초점을 맞춥니다.

그러나 이 방법은 이 호출을 어디에 배치해야 하는지에 대한 질문을 야기합니다. Dhiraj의 응답은 실행 가능한 솔루션을 제공합니다. React 라이프사이클 메서드인 componentDidMount()에 포커스 호출을 배치합니다.

또는 사용 편의성을 위해 autoFocus 소품을 활용하여 입력이 마운트될 때 자동으로 포커스를 가져올 수 있습니다.

/>

JSX에서 autoFocus prop은 일반 HTML과 달리 대문자 F로 작성됩니다. 대소문자를 구분하지 않습니다.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.