A ref sing dipasang menyang komponen custom ora bakal otomatis tekan DOM node ing dalemipun. forwardRef ngidini komponen nampa ref lan nelekakaké dheweke menyang elemen anak. useImperativeHandle ngganti apa sing ref kaandharaké.
A ref sing dipasang menyang komponen custom ora bakal otomatis tekan DOM node ing dalemipun. forwardRef ngidini komponen nampa ref lan nelekakaké dheweke menyang elemen anak. useImperativeHandle ngganti apa sing ref kaandharaké.
const TextInput = forwardRef(function TextInput(props, ref) {
return <input ref={ref} {...props} />; // parent's ref now points to the <input>
});
// parent can focus the inner input:
const ref = useRef(null);
<TextInput ref={ref} />;
// ref.current.focus();
Kadang ora pengin banjur kebocor DOM node kabeh — mung cara khusus:
const FancyInput = forwardRef(function FancyInput(props, ref) {
const inner = useRef(null);
useImperativeHandle(ref, () => ({
focus: () => inner.current.focus(),
clear: () => { inner.current.value = ""; },
}), []);
return <input ref={inner} {...props} />;
});
// parent: fancyRef.current.focus(); fancyRef.current.clear();
Lebih seneng props/state kanggo komunikasi. Rapaté menyang refs mung kangga kabutuhan imperative totohan: manajemen fokus, scrolling, pilihan teks, pemutaran media, utawa integrasi perpustakaan imperative. Cathetan: ing React 19, ref bisa dipasang minangka prop biasa, dadi forwardRef asring ora perlu maneh.