Découvrez comment utiliser la fonction forwardRef dans React pour exposer les nœuds DOM à l’intérieur d’un composant à son composant parent.
Dans React, les références sont utilisées pour stocker des valeurs qui ne déclenchent pas de nouveau rendu lors de la mise à jour. Nous pouvons également attribuer des références aux éléments DOM afin de pouvoir référencer la référence pour manipuler l’élément DOM attribué à la référence.
Les références peuvent également se voir attribuer des composants, mais nous devons effectuer une étape supplémentaire. Nous devons transmettre la référence à l’élément DOM que nous voulons attribuer ou définir la valeur que nous voulons renvoyer lorsque la référence est référencée avec forwardRef.
Dans cet article, nous verrons comment utiliser le forwardRef fonction pour exposer les nœuds DOM qui se trouvent à l’intérieur d’un composant.
Utilisation de base
Nous appelons le forwardRef fonction avec une fonction de rendu. Une fonction de rendu renvoie un groupe d’éléments ou de composants DOM.
forwardRef est nécessaire pour exposer un nœud DOM dans un composant à son composant parent.
Par exemple, nous écrivons :
import { forwardRef, useRef } from "react";
const CustomInput = forwardRef((props, ref) => {
const { label } = props;
return (
<>
<label>{label}</label>
<input ref={ref} />
</>
);
});
export default function App() {
const inputRef = useRef();
return (
<div>
<CustomInput label="Name" ref={inputRef} />
<button onClick={() => inputRef.current.focus()}>focus</button>
</div>
);
}
pour définir le CustomInput composant.
Nous autorisons le CustomInput composant auquel attribuer une référence en appelant forwardRef avec la fonction de rendu. La fonction prend le props du composant et du ref.
Nous attribuons le ref valeur du paramètre comme valeur de l’entrée ref prop afin que l’entrée soit renvoyée comme la valeur de inputRef.current quand nous y faisons référence dans App.
props sont les accessoires pour le CustomInput composant. Par conséquent, la label la valeur de l’accessoire serait Name.
Dans Appnous créons une référence avec useRef et attribuez-le comme valeur de CustomInputc’est ref soutenir.
Ensuite, nous attribuons le onClick accessoire du bouton pour appeler inputRef.current.focus()où inputRef.current est l’élément d’entrée dans le CustomInput composant.
Par conséquent, lorsque nous cliquons sur le bouton de focus, l’entrée aura le focus.
Personnaliser la valeur de la référence
Nous pouvons personnaliser la valeur de la référence avec le useImperativeHandle crochet. useImperativeHandle prend la référence, un rappel qui renvoie la valeur souhaitée pour la référence et un tableau de dépendances à surveiller pour déclencher le rappel à appeler en tant qu’arguments.
Par exemple, nous écrivons :
import { forwardRef, useImperativeHandle, useRef } from "react";
import { v4 as uuidv4 } from "uuid";
const CustomInput = forwardRef((props, ref) => {
const { label } = props;
const inputRef = useRef(null);
useImperativeHandle(
ref,
() => {
return {
focus() {
inputRef.current.focus();
},
scrollIntoView() {
inputRef.current.scrollIntoView();
}
};
},
[]
);
return (
<>
<label>{label}</label>
<div>
<input ref={inputRef} />
</div>
</>
);
});
export default function App() {
const inputRef = useRef();
return (
<div>
<div>
<button onClick={() => inputRef.current.focus()}>focus</button>
<button onClick={() => inputRef.current.scrollIntoView()}>
scroll into view
</button>
</div>
{Array(100)
.fill()
.map((_, i) => {
const key = uuidv4();
return (
<CustomInput
key={key}
label={`Name ${i + 1}`}
ref={i === 99 ? inputRef : undefined}
/>
);
})}
</div>
);
}
changer CustomInput appeler le useImperativeHandle crochet.
Il faut le ref nous voulons avancer comme premier argument. Le ref sera alors défini sur la valeur renvoyée par le rappel dans le deuxième argument.
Nous choisissons de rendre le focus et scrollIntoView méthode. focus appels focus sur l’élément d’entrée, nous avons attribué le inputRef en réglant le ref accessoire de l’entrée à inputRef.
Et en scrollIntoViewnous appelons l’entrée scrollIntoView méthode pour faire défiler la page jusqu’à ce que l’entrée soit visible à l’écran.
Le troisième argument est un tableau vide puisque nous ne voulons pas renvoyer une nouvelle valeur lorsque quelque chose avec une valeur réactive change, y compris les accessoires et les états.
Ensuite, dans Appnous rendons 100 CustomInput Composants. Nous attribuons le inputRef dans le App composant comme le ref valeur de l’accessoire si index i en 99. Sinon, nous ne lui attribuons pas de référence.
Par conséquent, le dernier CustomInput rendu, qui est le plus bas, se verrait attribuer inputRef et le reste n’a aucune référence qui leur est assignée.
Ensuite, nous ajoutons deux boutons. Le premier bouton appelle inputRef.current.focus() appeler focus sur le CustomInput qui a été assigné Appc’est inputRef.
De même, le deuxième bouton appelle scrollIntoView avec le même CustomInput. En conséquence, lorsque nous cliquons scrollIntoView, on fait défiler vers le bas de la page. Et lorsque nous cliquons sur focus, la dernière entrée est focalisée.
Transfert de références via plusieurs composants
Les références peuvent être transmises via plusieurs composants.
Par exemple, si on écrit :
import { forwardRef, useRef } from "react";
const CustomInput = forwardRef((props, ref) => {
const { label } = props;
return (
<>
<label>{label}</label>
<div>
<input ref={ref} />
</div>
</>
);
});
const InputGroup = forwardRef((props, ref) => {
const { label } = props;
return (
<>
<CustomInput ref={ref} label={label} />
<select>
<option>foo</option>
<option>bar</option>
</select>
</>
);
});
export default function App() {
const inputRef = useRef();
return (
<div>
<div>
<button onClick={() => inputRef.current.focus()}>focus</button>
</div>
<InputGroup label="Name" ref={inputRef} />
</div>
);
}
pour définir le InputGroup composant, qui restitue un CustomInput composant.
InputGroup est créé en appelant le forwardRef fonction afin qu’il puisse accepter le ref soutenir.
Puis on passe le ref à CustomInput en attribuant le ref paramètre de sa fonction de rendu à CustomInputc’est ref soutenir.
Et en CustomInputla fonction de rendu de, nous lui attribuons ref paramètre à l’entrée ref soutenir.
En conséquence, le App Composants inputRef value est l’élément d’entrée dans CustomInput puisque c’est là que la référence est finalement transmise.
Source link