Wie kann der Fokus nach dem Rendern der Komponente auf ein bestimmtes Textfeld gesetzt werden?
Die Dokumentation scheint die Verwendung von Referenzen vorzuschlagen, z.
Stellen Sie ref="nameInput"
in der Renderfunktion mein Eingabefeld ein und rufen Sie dann auf:
this.refs.nameInput.getInputDOMNode().focus();
Aber wo soll ich das nennen? Ich habe ein paar Orte ausprobiert, aber ich kann es nicht zum Laufen bringen.
javascript
reactjs
Dave
quelle
quelle
<input>
Element tun . So etwas wie<input ref={ (component) => ReactDOM.findDOMNode(component).focus() } />
Die Antwort von @ Dhiraj ist korrekt, und der Einfachheit halber können Sie die Autofokus-Requisite verwenden, um eine Eingabe beim Mounten automatisch fokussieren zu lassen:
Beachten Sie, dass es in jsx
autoFocus
(Großbuchstabe F) im Gegensatz zu einfachem altem HTML ist, bei dem die Groß- und Kleinschreibung nicht berücksichtigt wird.quelle
autofocus
Attribut verwendet wird, sondern auch dasfocus()
DOM-Mount-In,react-dom
sodass es ziemlich zuverlässig ist.Ab Reaktion 0.15 ist die prägnanteste Methode:
quelle
Konzentrieren Sie sich auf die Montierung
Wenn Sie ein Element beim Mounten (anfänglich rendern) nur fokussieren möchten, reicht eine einfache Verwendung des autoFocus-Attributs aus.
Dynamischer Fokus
Um den Fokus dynamisch zu steuern, verwenden Sie eine allgemeine Funktion, um Implementierungsdetails vor Ihren Komponenten zu verbergen.
Reagieren Sie auf 16.8 + Funktionskomponente - useFocus hook
Vollständige Demo
Reagieren Sie auf Komponenten der Klasse 16.3 + - useFocus
Vollständige Demo
quelle
(htmlElRef.current as any).focus()
und (2)return {htmlElRef, setFocus}
anstelle von Array.useFocus
mehr als ein Element verwenden möchten .useFocus
in Typoskript geschrieben. gist.github.com/carpben/de968e377cbac0ffbdefe1ab56237573as const
du hast), sehr lehrreich!set
in die zweite Position zu bringen wieconst [inputRef, setInputFocus] = useFocus()
. Dies entspricht useState mehr. Erst das Objekt, dann der Setter dieses ObjektsWenn Sie in React nur den Autofokus aktivieren möchten, ist dies ganz einfach.
Wenn Sie nur wissen möchten, wo Sie diesen Code ablegen sollen, finden Sie die Antwort in componentDidMount ().
v014.3
Lesen Sie die API-Dokumente hier: https://facebook.github.io/react/docs/top-level-api.html#reactdom.finddomnode
quelle
F
! (Hinweis für sich selbst und andere, nicht für den Antwortenden).Reagieren 16.3 wurde eine neue bequeme Methode hinzugefügt, um dies zu handhaben, indem im Konstruktor der Komponente eine Referenz erstellt und wie folgt verwendet wird:
Weitere Details können Sie überprüfen diesem Artikel im React-Blog.
Aktualisieren:
Ab Reaktion 16.8 kann der
useRef
Haken in Funktionskomponenten verwendet werden, um das gleiche Ergebnis zu erzielen:quelle
Ich bin gerade auf dieses Problem gestoßen und
verwendereag15.0.115.0.2 und ich verwende die ES6-Syntax und habe aus den anderen Antworten nicht ganz das bekommen, was ich brauchte, da v.15 vor Wochen und einige derthis.refs
Eigenschaften gelöscht wurden wurden veraltet und entfernt .Im Allgemeinen brauchte ich:
Ich benutze:
Fokussieren Sie das erste Eingabeelement
Ich habe
autoFocus={true}
auf der ersten<input />
Seite verwendet, damit die Komponente beim Mounten den Fokus erhält.Fokussieren Sie das erste Eingabeelement mit einem Fehler
Dies dauerte länger und war komplizierter. Ich halte Code fern, der für die Lösung der Kürze halber nicht relevant ist.
Redux Store / State
Ich benötige einen globalen Status, um zu wissen, ob ich den Fokus festlegen und deaktivieren soll, wenn er festgelegt wurde. Daher setze ich den Fokus nicht immer wieder neu, wenn die Komponenten neu gerendert werden (ich werde ihn verwenden
componentDidUpdate()
, um den Fokus festzulegen. )Dies kann so gestaltet werden, wie Sie es für Ihre Anwendung für richtig halten.
Containerkomponente
Für die Komponente müssen die
resetfocus
Eigenschaft und ein CallBack festgelegt sein, um die Eigenschaft zu löschen, wenn der Fokus auf sich selbst gelegt wird.Beachten Sie auch, dass ich meine Action Creators in separate Dateien organisiert habe, hauptsächlich weil mein Projekt ziemlich groß ist und ich sie in überschaubarere Teile aufteilen wollte.
Präsentationskomponente
Überblick
Die allgemeine Idee ist, dass jedes Formularfeld, das einen Fehler aufweisen und fokussiert sein könnte, sich selbst überprüfen muss und ob es sich auf sich selbst konzentrieren muss.
Es muss eine Geschäftslogik vorhanden sein, um festzustellen, ob das angegebene Feld das richtige Feld ist, auf das der Fokus gesetzt werden soll. Dies wird nicht angezeigt, da es von der jeweiligen Anwendung abhängt.
Wenn ein Formular gesendet wird, muss dieses Ereignis das globale Fokusflag
resetFocus
auf true setzen. Wenn sich dann jede Komponente selbst aktualisiert, wird überprüft, ob sie den Fokus erhält. Wenn dies der Fall ist, wird das Ereignis ausgelöst, um den Fokus zurückzusetzen, damit andere Elemente nicht weiter prüfen müssen.Bearbeiten Als Randnotiz hatte ich meine Geschäftslogik in einer "Dienstprogramm" -Datei und habe die Methode einfach exportiert und in jeder aufgerufen
shouldfocus()
Methode .Prost!
quelle
Die React-Dokumente haben jetzt einen Abschnitt dafür. https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute
quelle
autofocus
montieren, sondern suchte nur nach dem Element, das bei der Eingabe eines Werts fokussiert bleiben sollte. Dies funktionierte perfekt für dieses Szenario. (mit Reaktion 15)Dies ist nicht mehr die beste Antwort. Ab Version 0.13 ist
this.refs
escomponentDidMount()
in einigen Fällen möglicherweise erst verfügbar, nachdem AFTER ausgeführt wurde.autoFocus
Fügen Sie einfach das Tag zu Ihrem Eingabefeld hinzu, wie oben von FakeRainBrigand gezeigt.quelle
<input autofocus>
Felder verhalten sich nicht gut<input>
After-RenderingRef. @ Daves Kommentar zu @ Dhirajs Antwort; Eine Alternative besteht darin, die Rückruffunktion des ref-Attributs für das gerenderte Element zu verwenden (nachdem eine Komponente zum ersten Mal gerendert wurde):
Mehr Info
quelle
Uncaught TypeError: Cannot read property 'focus' of null
component && React.findDomNode...
. Lesen Sie hier mehr darüber: facebook.github.io/react/docs/…Dies ist der richtige Weg, um Autofokus. Wenn Sie Callback anstelle von String als Referenzwert verwenden, wird dieser automatisch aufgerufen. Sie haben Ihre Referenz verfügbar, ohne das DOM mit berühren zu müssen
getDOMNode
quelle
Beachten Sie, dass keine dieser Antworten bei mir mit einer Material-UI-TextField-Komponente funktioniert hat . Per Wie setze ich den Fokus auf ein materialUI TextField? Ich musste durch einige Reifen springen, um dies zum Laufen zu bringen:
quelle
focus()
bis zum Ende der Animation verzögert werden.Sie können diesen Methodenaufruf in die Renderfunktion einfügen. Oder innerhalb der Lebenszyklusmethode,
componentDidUpdate
quelle
Du brauchst nicht
getInputDOMNode
?? in diesem Fall...Holen Sie sich einfach das
ref
undfocus()
es, wenn die Komponente bereitgestellt wird - componentDidMount ...quelle
AutoFocus hat bei mir am besten funktioniert. Ich musste einen Text in eine Eingabe mit diesem Text per Doppelklick ändern, damit ich am Ende Folgendes erhielt:
HINWEIS: Um das Problem zu beheben, bei dem React das Caret am Anfang des Textes platziert, verwenden Sie diese Methode:
Hier zu finden: https://coderwall.com/p/0iz_zq/how-to-put-focus-at-the-end-of-an-input-with-react-js
quelle
Ich habe das gleiche Problem, aber ich habe auch einige Animationen, daher schlägt mein Kollege vor, window.requestAnimationFrame zu verwenden
Dies ist das Ref-Attribut meines Elements:
quelle
Sollte sein
quelle
Die einfachste Antwort ist, das ref = "irgendeinen Namen" in das Eingabetextelement einzufügen und die folgende Funktion aufzurufen.
quelle
Um den Fokus auf ein neu erstelltes Element zu verschieben, können Sie die ID des Elements im Status speichern und zum Festlegen verwenden
autoFocus
. z.BAuf diese Weise wird keines der Textfelder auf das Laden von Seiten fokussiert (wie ich es möchte). Wenn Sie jedoch auf die Schaltfläche "Hinzufügen" klicken, um einen neuen Datensatz zu erstellen, wird dieser neue Datensatz fokussiert.
Da
autoFocus
die Komponente erst wieder "ausgeführt" wird, wenn die Komponente erneut bereitgestellt wird, muss ich mich nicht um das Deaktivieren kümmernthis.state.focus
(dh sie stiehlt den Fokus nicht mehr zurück, wenn ich andere Status aktualisiere).quelle
Lies fast die ganze Antwort, sah aber keine
getRenderedComponent().props.input
Stellen Sie Ihre Texteingabe-Refs ein
this.refs.username.getRenderedComponent().props.input.onChange('');
quelle
Nachdem ich viele der oben genannten Optionen ohne Erfolg ausprobiert hatte, stellte ich fest, dass es so war, wie ich war,
disabling
und dannenabling
die Eingabe, die dazu führte, dass der Fokus verloren ging.Ich hatte eine Requisite,
sendingAnswer
die die Eingabe deaktivieren würde, während ich das Backend abfragte.Nachdem ich die behinderte Requisite entfernt hatte, fing alles wieder an zu funktionieren.
quelle
Aktualisierte Version können Sie hier überprüfen
quelle
Da es viele Gründe für diesen Fehler gibt, dachte ich, dass ich auch das Problem posten würde, mit dem ich konfrontiert war. Für mich war das Problem, dass ich meine Eingaben als Inhalt einer anderen Komponente gerendert habe.
So habe ich die obige Komponente genannt:
quelle
Entsprechend der aktualisierten Syntax können Sie verwenden
this.myRref.current.focus()
quelle