Aus dem Kurs: React Grundkurs
So erhalten Sie Zugriff auf diesen Kurs
Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 24.700 Kurse von Branchenfachleuten.
createForwardRef & useRef – Tutorial zu React.js
Aus dem Kurs: React Grundkurs
createForwardRef & useRef
Manchmal brauchen wir direkten Zugriff auf DOM-Elemente. Wir schauen uns in dieser Lektion an, wie Sie mit ref Referenzen von HTML-Elementen bekommen. In der App-Component sehen Sie eine kleine statische Webseite. Diese enthält eine Navigation, ein Bild, ein paar Blog-Artikel und letzten Endes auch ein footer-Element, in dem ein Button vorhanden ist. Bei Klick auf diesen Button wollen wir, dass wir an den Anfang der Seite scrollen bzw. wir wollen direkt in die Navigation springen. Wir brauchen also auf jeden Fall eine Funktion, die wir bei onClick() ausführen. In diesem Fall nehmen wir buttonClicked. Beim Button-Klick wollen wir dann in die Navigation springen, also "jump to nav". Damit ein nicht fokussierbares Element in HTML fokussierbar wird, braucht es einen tabIndex. In diesem Fall reicht tabIndex von -1. Wenn wir nun die Referenz zum nav-Element hätten, dann könnten wir einfach aufrufen nav.focus(). Doch diese Referenz fehlt uns. Für Referenzen jeder Art brauchen Sie einen…