javascript / intermediate
Snippet
Anpassung von Ref-Schnittstellen mit useImperativeHandle
useImperativeHandle passt den Instanzwert an, der Elternkomponenten bei der Verwendung von ref zur Verfügung gestellt wird. Anstatt den gesamten DOM-Knoten freizugeben, können Sie eine begrenzte, spezifische API von Methoden bereitstellen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
import { useImperativeHandle, forwardRef, useRef } from 'react';const FancyEditor = forwardRef((props, ref) => {const inputRef = useRef();useImperativeHandle(ref, () => ({focusAndClear: () => {inputRef.current.focus();inputRef.current.value = '';}}));return <input ref={inputRef} />;});
react
Erklärung
1
useImperativeHandle(ref, () => ({ ... }));
Definiert, welche Eigenschaften oder Funktionen ref.current des Elternteils enthalten wird.
2
focusAndClear: () => { ... }
Stellt eine benutzerdefinierte imperative Methode für die Elternkomponente bereit.