Hook-ul useImperativeHandle lucrează în combinație cu ref pentru a personaliza instanța expusă unei componente părinte. În loc să ofere acces direct și neîngrădit la nodul DOM nativ (care ar permite modificări arbitrare necontrolate), o componentă copil poate alege să expună o interfață strictă, formată doar din câteva metode sigure (de exemplu: focus(), reset() sau scrollLaInceput()).
Exemplu: Câmp text cu interfață imperativă restrânsă
import { useRef, useImperativeHandle, forwardRef } from 'react';
// Componenta copil expune doar o comandă de focalizare și una de golire:
export const CampTextControlat = forwardRef(function CampTextControlat(props, ref) {
const refInputReal = useRef(null);
useImperativeHandle(ref, () => {
return {
focalizeaza() {
refInputReal.current?.focus();
},
golesteContinut() {
if (refInputReal.current) {
refInputReal.current.value = '';
}
}
};
}, []);
return <input ref={refInputReal} type="text" placeholder="Scrie aici..." {...props} />;
});
// Componenta părinte apelează exclusiv metodele declarate în handle:
export default function PanouFormular() {
const refCamp = useRef(null);
return (
<div>
<CampTextControlat ref={refCamp} />
<button onClick={() => refCamp.current?.focalizeaza()}>Focalizează</button>
<button onClick={() => refCamp.current?.golesteContinut()}>Resetează</button>
</div>
);
}
Întrebări & Exemple de Cod:
Hook-ul useImperativeHandle: Personalizarea Referințelor ExpuseAi o nelămurire despre utilizarea comenzii
Hook-ul useImperativeHandle: Personalizarea Referințelor Expusesau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!
Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.