Wenn eine Funktion einer Unterkomponente in einer Elternkomponente ausgeführt werden soll sollte man diesen Hook verwenden.
Beispiel: In einer Komponente wird ein Formular als Kindkomponente eingebettet. Der Submitbutton liegt aber in der Elternkomponente. Die Submitmethode liegt in der Childkomponente.
In der Childkomponente wird die auszuführende Funktion in den Hook einbettet:
useImperativeHandle(ref, () => ({
submitForm() {
console.log('sendForm');
},
}))Code-Sprache: JavaScript (javascript)
Dafür muss die Komponente über forwardRef befähigt werden, als Referenz aufgerufen werden zu können:
const AddressForm = forwardRef((props, ref) => {Code-Sprache: JavaScript (javascript)
Die Komponente wird dann wie folgt in die Elternkomponente eingebettet:
<AddressForm ref={addressFormRef} />Code-Sprache: HTML, XML (xml)
In der Elternkomponente kann dann beim Klick auf den Button die Funktion über die Referenz auf die Komponente aufgerufen werden:
const _onSubmit = () => {
addressFormRef.current.submitForm();
}Code-Sprache: JavaScript (javascript)
Hinweis: Wenn die Unterkomponente mit der Redux-Funktion connect verbunden ist, dann muss im connect als Option forwardRef: true mitgegeben werden:
export default connect(mapStateToProps, null, null, { forwardRef: true })(AddressForm)Code-Sprache: JavaScript (javascript)
https://reactjs.org/docs/hooks-reference.html#useimperativehandle