반응에서 초점을 설정하는 방법
- 藏色散人원래의
- 2022-12-27 11:18:382228검색
반응에서 포커스를 설정하는 방법: 1. componentDidMount에서 DOM 요소를 사용합니다. 2. "this.input.focus()"의 DOM API를 호출하여 페이지가 로드된 후 입력 상자에 자동으로 포커스를 맞추는 기능을 구현합니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.
반응에서 초점을 설정하는 방법은 무엇입니까?
React는 페이지에 진입한 후 자동으로 입력 상자에 초점을 맞춥니다.
React.js에서는 기본적으로 DOM을 직접 다룰 필요가 없습니다. React.js는 이벤트 모니터링에 도움이 되는 일련의 on* 메소드를 제공하므로 과거에는 React.js에서 addEventListener의 DOM API를 직접 호출할 필요가 없었습니다. 수동 DOM 작업을 통해 페이지를 업데이트했습니다. jQuery의 도움으로), React에서는 setState를 통해 구성 요소를 직접 다시 렌더링할 수 있습니다. 렌더링 시 새 소품을 하위 구성 요소에 전달하여 페이지 업데이트 효과를 얻을 수 있습니다.
React.js의 재렌더링 메커니즘은 대부분의 DOM 업데이트 작업을 방지하는 데 도움이 되며 개발 도구 체인에서 DOM 작업을 주로 캡슐화하는 jQuery와 같은 타사 라이브러리도 제거합니다.
하지만 React.js는 모든 DOM 작업 요구 사항을 완전히 충족할 수 없습니다. 때로는 여전히 DOM을 처리해야 합니다. 예를 들어, 페이지 진입 후 입력 상자에 자동으로 초점을 맞추려면 input.focus()의 DOM API를 호출해야 합니다. 예를 들어 후속 애니메이션에 대한 DOM 요소의 크기를 동적으로 가져오려는 경우입니다. , 등.
React.js는 마운트된 요소의 DOM 노드를 가져오는 데 도움이 되는 ref 속성을 제공합니다. JSX 요소에 ref 속성을 추가할 수 있습니다.
input 요소에 ref 속성을 추가한 것을 볼 수 있으며, 이 속성의 값은 함수입니다. 입력 요소가 페이지에 마운트되면 React.js는 이 함수를 호출하고 마운트된 DOM 노드를 이 함수에 전달합니다. 함수에서 이 DOM 요소를 구성 요소 인스턴스의 속성으로 설정하므로 나중에 this.input을 통해 이 DOM 요소를 가져올 수 있습니다.
그런 다음 이 DOM 요소를 componentDidMount에서 사용하고 this.input.focus()의 DOM API를 호출할 수 있습니다. 전반적으로 페이지가 로드된 후 입력 상자에 자동으로 초점을 맞추는 기능을 달성합니다(구성 요소 수명 주기인 componentDidMount를 사용하는 것을 볼 수 있습니다).
HTML 요소 태그에 ref를 추가하여 DOM 요소를 가져온 다음 DOM API를 호출할 수 있습니다. 하지만 한 가지 원칙을 기억하세요. 가능하다면 ref를 사용하지 마세요. 특히, React.js가 도움을 줄 수 있는 자동 페이지 업데이트 작업 및 이벤트 모니터링을 수행하기 위해 ref를 사용하지 마세요. 중복된 DOM 작업은 실제로 코드의 "노이즈"이며, 이는 우리의 이해와 유지 관리에 도움이 되지 않습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 进入页面以后自动 focus 到某个输入框</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class AutoFocusInput extends React.Component {
componentDidMount () {
this.input.focus()
}
render () {
return (
<input ref={(input) => this.input = input} />
)
}
}
ReactDOM.render(
<AutoFocusInput />,
document.getElementById('root')
);
</script>
</body>
</html>또 다른 작성 방법:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 进入页面以后自动 focus 到某个输入框</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
render() {
return <input type="text" ref={this.inputRef} />;
}
componentDidMount() {
this.inputRef.current.focus();
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('root')
);
</script>
</body>
</html>추천 학습: "react 비디오 튜토리얼"
위 내용은 반응에서 초점을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!