Maison > Article > interface Web > Comment se concentrer en réaction
Comment se concentrer en réaction
- 藏色散人original
- 2022-12-27 11:18:382209parcourir
Comment définir le focus dans React : 1. Utilisez les éléments DOM dans composantDidMount ; 2. Appelez l'API DOM de "this.input.focus()" pour obtenir la fonction de mise au point automatique sur la zone de saisie une fois la page chargée.
L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.
Comment se concentrer sur React ?
React se concentre automatiquement sur une zone de saisie après avoir entré la page
Dans React.js, vous n'avez fondamentalement pas besoin de traiter directement avec le DOM. React.js fournit une série de méthodes on* pour nous aider à surveiller les événements, il n'est donc pas nécessaire d'appeler directement l'API DOM de addEventListener dans React.js, nous avons mis à jour la page via des opérations DOM manuelles (par exemple ; avec l'aide de jQuery), mais dans React. Dans js, les composants peuvent être restitués directement via setState, lors du rendu, de nouveaux accessoires peuvent être transmis aux sous-composants pour obtenir l'effet de mise à jour de la page.
Le mécanisme de re-rendu de React.js nous aide à éviter la plupart des opérations de mise à jour du DOM et supprime également les bibliothèques tierces comme jQuery qui encapsulent principalement les opérations DOM de notre chaîne d'outils de développement.
Mais React.js ne peut pas répondre pleinement à tous les besoins opérationnels du DOM. Parfois, nous devons encore gérer le DOM. Par exemple, si vous souhaitez vous concentrer automatiquement sur une zone de saisie après avoir accédé à la page, vous devez appeler l'API DOM de input.focus(). Par exemple, si vous souhaitez obtenir dynamiquement la taille d'un élément DOM pour une animation ultérieure. , etc.
React.js fournit l'attribut ref pour nous aider à obtenir le nœud DOM de l'élément monté. Vous pouvez ajouter l'attribut ref à un élément JSX.
Vous pouvez voir que nous avons ajouté un attribut ref à l'élément d'entrée, et la valeur de cet attribut est une fonction. Lorsque l'élément d'entrée est monté sur la page, React.js appellera cette fonction et transmettra le nœud DOM monté à cette fonction. Dans la fonction, nous définissons cet élément DOM comme attribut de l'instance du composant, afin que nous puissions obtenir cet élément DOM via this.input à l'avenir.
Ensuite, nous pouvons utiliser cet élément DOM dans composantDidMount et appeler l'API DOM de this.input.focus(). Dans l'ensemble, il remplit la fonction de se concentrer automatiquement sur la zone de saisie après le chargement de la page (vous pouvez remarquer que nous utilisons le cycle de vie des composants composantDidMount).
Nous pouvons ajouter une référence à n'importe quelle balise d'élément HTML pour obtenir son élément DOM, puis appeler l'API DOM. Mais rappelez-vous un principe : n’utilisez pas ref si vous le pouvez. En particulier, évitez d'utiliser ref pour effectuer les opérations de mise à jour automatique des pages et la surveillance des événements que React.js peut vous aider à effectuer. Les opérations DOM redondantes sont en fait du « bruit » dans le code, ce qui n'est pas propice à notre compréhension et à notre maintenance.
<!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>Une autre façon d'écrire :
<!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>Apprentissage recommandé : "tutoriel vidéo React"
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!