Wenn Sie React 16.3+ verwenden, wird die vorgeschlagene Methode zum Erstellen von Refs verwendet React.createRef()
.
class TestApp extends React.Component<AppProps, AppState> {
private stepInput: React.RefObject<HTMLInputElement>;
constructor(props) {
super(props);
this.stepInput = React.createRef();
}
render() {
return <input type="text" ref={this.stepInput} />;
}
}
Wenn die Komponente bereitgestellt wird, ref
wird die current
Eigenschaft des Attributs dem referenzierten Komponenten- / DOM-Element zugewiesen und null
beim Aufheben der Bereitstellung zurück zugewiesen. So können Sie beispielsweise mit darauf zugreifen this.stepInput.current
.
Weitere Informationen findenRefObject
Sie unter @ apieceofbarts Antwort oder die PR createRef()
wurde hinzugefügt.
Wenn Sie eine frühere Version von React (<16.3) verwenden oder eine genauere Kontrolle darüber benötigen, wann Refs gesetzt und deaktiviert werden, können Sie "Callback Refs" verwenden .
class TestApp extends React.Component<AppProps, AppState> {
private stepInput: HTMLInputElement;
constructor(props) {
super(props);
this.stepInput = null;
this.setStepInputRef = element => {
this.stepInput = element;
};
}
render() {
return <input type="text" ref={this.setStepInputRef} />
}
}
Wenn die Komponente bereitgestellt wird, ruft React den ref
Rückruf mit dem DOM-Element auf und ruft ihn auf, null
wenn die Bereitstellung aufgehoben wird. So können Sie beispielsweise einfach mit darauf zugreifen this.stepInput
.
Indem Sie den ref
Rückruf als gebundene Methode für die Klasse im Gegensatz zu einer Inline-Funktion definieren (wie in einer früheren Version dieser Antwort), können Sie verhindern, dass der Rückruf bei Aktualisierungen zweimal aufgerufen wird .
Es verwendet zu sein , eine API , wo das ref
Attribut war ein String (siehe Akshar Patel Antwort ), aber aufgrund einiger Probleme , string Refs dringend abgeraten werden und wird schließlich entfernt werden.
Bearbeitet am 22. Mai 2018, um die neue Methode zum Ausführen von Refs in React 16.3 hinzuzufügen. Vielen Dank an @apieceofbart für den Hinweis, dass es einen neuen Weg gibt.
refs
Klassenattribut werden in kommenden React-Versionen nicht mehr unterstützt.Eine Möglichkeit (die ich gemacht habe ) ist die manuelle Einrichtung:
dann können Sie dies sogar in eine schönere Getter-Funktion einwickeln (zB hier ):
quelle
any
ist hier nicht obligatorisch. Die meisten Beispiele sehe ich VerwendungHTMLInputElement
. Nur das Offensichtliche angeben, aber wenn sich Ihr Verweis auf einer React-Komponente befindet (dhPeoplePicker
), können Sie diese Komponente als Typ verwenden, um Typisierungen abzurufen.Seit React 16.3 können Sie Refs hinzufügen, indem Sie React.createRef verwenden, wie Jeff Bowen in seiner Antwort gezeigt hat. Sie können jedoch Typescript nutzen, um Ihre Referenz besser einzugeben.
In Ihrem Beispiel verwenden Sie ref on input element. So würde ich es machen:
Auf diese Weise haben Sie Zugriff auf alle Eingabemethoden, wenn Sie diese Referenz verwenden möchten:
Sie können es auch für benutzerdefinierte Komponenten verwenden:
und dann zum Beispiel Zugriff auf Requisiten haben:
quelle
BEARBEITEN: Dies ist nicht mehr der richtige Weg, um Refs mit Typescript zu verwenden. Schauen Sie sich Jeff Bowens Antwort an und stimmen Sie sie ab, um ihre Sichtbarkeit zu erhöhen.
Ich habe die Antwort auf das Problem gefunden. Verwenden Sie die folgenden Referenzen in der Klasse.
Vielen Dank an @basarat für den Hinweis in die richtige Richtung.
quelle
Property 'stepInput' does not exist on type '{ [key: string]: Component<any, any> | Element; }'
, wenn ich versuche zuzugreifenthis.refs.stepInput
.refs
Objekt nur den[key: string]
Eintrag hatte.React.createRef
(Klassenkomponenten)Hinweis: Hier wird die alte String Refs- Legacy-API weggelassen ...
Schreibgeschützte Referenzen für DOM-Knoten: Veränderbare Referenzen für beliebig gespeicherte Werte:React.useRef
(Haken / Funktionskomponenten)Hinweis: In diesem Fall nicht initialisieren
useRef
mitnull
. Es würde denrenderCountRef
Typ machenreadonly
(siehe Beispiel ). Wenn Sie benötigen bietennull
als Anfangswert, dies zu tun:Rückrufreferenzen (funktionieren für beide)
Spielplatz Probe
quelle
useRef() as MutableRefObject<HTMLInputElement>
unduseRef<HTMLInputElement>(null)
?current
Eigenschaft vonMutableRefObject<HTMLInputElement>
kann geändert werden, währenduseRef<HTMLInputElement>(null)
einRefObject
Typ mit dercurrent
Markierung als erstellt wirdreadonly
. Ersteres kann verwendet werden, wenn Sie aktuelle DOM-Knoten in refs selbst ändern müssen, z. B. in Kombination mit einer externen Bibliothek. Es kann auch geschrieben werden ohneas
:useRef<HTMLInputElement | null>(null)
. Letzteres ist eine bessere Wahl für React-verwaltete DOM-Knoten, wie sie in den meisten Fällen verwendet werden. React speichert die Knoten in den Refs selbst und Sie möchten nicht herumfummeln, um diese Werte zu ändern.Wenn Sie verwenden
React.FC
, fügen Sie dieHTMLDivElement
Schnittstelle hinzu:Und verwenden Sie es wie folgt:
quelle
Um den in der React-Dokumentation empfohlenen Rückrufstil ( https://facebook.github.io/react/docs/refs-and-the-dom.html ) zu verwenden, können Sie eine Definition für eine Eigenschaft in der Klasse hinzufügen:
quelle
Da mir kein vollständiges Beispiel fehlt, ist hier mein kleines Testskript zum Abrufen von Benutzereingaben bei der Arbeit mit React und TypeScript. Teilweise basierend auf den anderen Kommentaren und diesem Link https://medium.com/@basarat/strongly-typed-refs-for-react-typescript-9a07419f807#.cdrghertm
}}
quelle
Für Typoskriptbenutzer ist kein Konstruktor erforderlich.
...
...
quelle
Aus der Definition des Reaktionstyps
So können Sie wie folgt auf Ihr refs-Element zugreifen
ohne Neudefinition des Referenzindex.
Wie @manakor erwähnt, können Sie Fehler wie bekommen
Wenn Sie Refs neu definieren (abhängig von der verwendeten IDE- und TS-Version)
quelle
Nur um einen anderen Ansatz hinzuzufügen - Sie können einfach Ihren Schiedsrichter besetzen, so etwas wie:
quelle
Ich mache das immer, in diesem Fall, um mir einen Schiedsrichter zu schnappen
let input: HTMLInputElement = ReactDOM.findDOMNode<HTMLInputElement>(this.refs.input);
quelle
Wenn Sie Ihre nicht weiterleiten möchten, müssen Sie
ref
in der Props-Oberfläche denRefObject<CmpType>
Typ from verwendenimport React, { RefObject } from 'react';
quelle
Für diejenigen, die sich ansehen, wie es geht, wenn Sie eine Reihe von Elementen haben:
quelle
lege sie in ein Objekt
quelle