demande:
Lorsque vous effectuez des projets mobiles, introduisez la zone de saisie d'entrée. Lorsque vous utilisez la zone de saisie d'entrée, j'espère obtenir automatiquement le focus, de sorte que la méthode d'entrée sur le terminal mobile s'affiche automatiquement, ce qui est pratique pour les utilisateurs.
atteindre:
<Input
ref={
function (input) {
if (input != null) {
input.focus();
}
}}
/>
Pourquoi
Dans React.js, vous n'avez fondamentalement pas besoin de traiter directement 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; dans le passé, nous utilisions des opérations DOM manuelles pour mettre à jour la page (par exemple , avec l'aide de jQuery), mais dans React.js. Dans js, le composant peut être rendu directement via setState, et les nouveaux accessoires peuvent être passés au composant enfant lors du rendu, afin d'obtenir l'effet de page mettre à jour.
Le mécanisme de re-rendu de React.js nous aide à éviter la plupart des opérations de mise à jour DOM, et permet également aux bibliothèques tierces comme jQuery qui encapsulent principalement les opérations DOM d'être supprimées de notre chaîne d'outils de développement.
Mais React.js ne peut pas satisfaire pleinement toutes les exigences de manipulation 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 être entré dans la page, vous devez appeler l'API DOM de input.focus (). Par exemple, 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:
class AutoFocusInput extends Component {
componentDidMount () {
this.input.focus()
}
render () {
return (
<input ref={
(input) => this.input = input} />
)
}
}
ReactDOM.render(
<AutoFocusInput />,
document.getElementById('root')
)
Vous pouvez voir que nous avons ajouté un attribut ref à l'élément d'entrée et que la valeur de l'attribut est une fonction. Lorsque l'élément d'entrée est monté sur la page, React.js appellera cette fonction et passera le nœud DOM monté à cette fonction. Dans la fonction, nous définissons cet élément DOM comme un attribut de l'instance de composant, afin que nous puissions obtenir cet élément DOM via this.input à l'avenir.
Ensuite, nous pouvons utiliser cet élément DOM dans componentDidMount et appeler l'API DOM de this.input.focus (). Dans son ensemble, la fonction de se concentrer automatiquement sur la zone de saisie lorsque le chargement de la page est terminé (vous pouvez remarquer que nous utilisons le cycle de vie des composants de componentDidMount).
Nous pouvons ajouter ref à n'importe quelle balise d'élément HTML représentative pour obtenir son élément DOM, puis appeler l'API DOM. Mais rappelez-vous un principe: si vous pouvez utiliser ref, vous ne l'utilisez pas. 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 déjà vous aider à faire. Les opérations DOM excessives sont en fait du «bruit» dans le code, ce qui n'est pas propice à notre compréhension et à notre maintenance.
À propos, vous pouvez en fait ajouter ref à la balise de composant, par exemple:
<Clock ref={
(clock) => this.clock = clock} />
De cette façon, vous obtenez une instance de ce composant Clock initialisé dans React.js. Mais ce n'est pas une pratique courante et il n'est pas recommandé de le faire, c'est pourquoi il est brièvement mentionné ici, et les amis intéressés peuvent apprendre et explorer par eux-mêmes.
