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

React에서 입력 필드의 렌더링 후 집중

초기 렌더링 후 요소를 조작하는 것은 프런트 엔드 개발에서 일반적으로 필요합니다. React에서 입력 필드에 대해 이를 달성하려면 원활한 사용자 상호 작용을 보장하도록 포커스를 설정해야 합니다.

문서에 언급된 한 가지 접근 방식은 참조를 사용하는 것입니다. 여기에는 ref="nameInput"과 같은 렌더링 함수 내의 입력 필드에 ref 속성을 할당하는 작업이 포함됩니다. 입력에 초점을 맞추려면 this.refs.nameInput.getInputDOMNode().focus();를 호출하면 됩니다. 그러나 이것이 항상 예상대로 작동하지 않을 수도 있습니다.

예를 들어 this.refs.nameInput.getInputDOMNode().focus(); componentDidMount() 라이프사이클 메소드 내에서. 하지만 해당 단계에서는 아직 DOM 노드를 사용할 수 없기 때문에 작동하지 않습니다.

대신 DOM이 렌더링된 후에 포커스를 설정해야 합니다. 이를 수행하는 한 가지 방법은 포커스 작업을 위한 함수를 생성하고 이를 componentDidUpdate() 수명 주기 메서드에서 호출하는 것입니다. 예는 다음과 같습니다.

<code class="javascript">class MyComponent extends React.Component {
  focusInput() {
    this.inputElement.focus();
  }

  componentDidUpdate() {
    this.focusInput();
  }

  render() {
    return <input ref={el => this.inputElement = el} />;
  }
}</code>

또는 autoFocus 소품을 활용할 수도 있습니다.

<code class="javascript"><input autoFocus name="..." /></code>

이렇게 하면 입력이 마운트 시 자동으로 포커스를 받게 됩니다. JSX에서 autoFocus 소품의 대문자 사용에 유의하세요.

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