Ist es möglich, dom-Element-Methoden wie focus () aufzurufen, ohne einen ref zu verwenden? (Zustandslose Komponentenfunktionen)

8

Ich versuche, refs so oft wie möglich zu verwenden, aber es scheint, dass es keine Möglichkeit gibt, native dom-Methoden aufzurufen (focus (), reset (), blur () usw.), damit bin ich einverstanden. Außer , dass ich die neuen Funktionen für grundlegende Dinge wie Formulareingaben verwenden möchte. Diese Stateless-Komponenten lassen Refs nicht zu sie (sie werden null zurückgeben). Ich verstehe, dass ich einen regulären React-Klassenkomponenten-Wrapper um die zustandslose Komponente hinzufügen kann, damit ReactDOM.findDOMNode (ref) korrekt funktioniert, aber was bringt es, wenn die stateless-Funktion immer umbrochen werden muss? Fehle ich etwas?

    
Balls McHenry 29.07.2016, 17:31
quelle

5 Antworten

5

Hier ist eine Lösung, die ich entwickelt habe, die das Umbrechen der zustandslosen Komponente in einer Klasse nicht erfordert. Stattdessen übergibt das übergeordnete Element eine Funktion an die zustandslose Komponente als Prop, die als Callback-Funktion für das Ref auf dem DOM-Element verwendet wird.

Legen Sie zuerst eine Methode für das statusbehaftete Parent fest, die als Callback für den Verweis verwendet wird, und eine andere Methode für die Aktion für das DOM-Element (in diesem Fall die Fokussierung nach einem Tastendruck). Dann sende die Methode als Stütze an das staatenlose Kind.

%Vor%

Die zustandslose Komponente geht davon aus, dass eine Methode vom übergeordneten Element refCallback an sie übergeben wird. Dieser Prop kann über eine beliebige Anzahl von Komponentengenerationen weitergegeben werden, um das DOM-Element zu erreichen.

%Vor%     
Balls McHenry 29.07.2016, 19:00
quelle
1

Umwickeln Sie einfach Ihre statusfreie Komponente mit der Klassenkomponente (es6) und fügen Sie eine Referenz ein. Es ist in den offiziellen Dokumenten

geschrieben     
andreo 29.07.2016 18:11
quelle
0

Die sauberste Lösung, die ich gefunden habe, besteht darin, eine lokale Variable zu setzen und ihr dann ref zuzuweisen. Dann kann auf diese zugegriffen und bei Bedarf fokussiert werden:

%Vor%     
Adam 01.12.2016 06:33
quelle
0

Ja, erinnere dich daran während des Renderns und führe es aus und konzentriere dich darauf nach dem Rendern:

%Vor%     
Aleksey Bykov 17.04.2017 02:17
quelle
0

hatte gerade auch dieses Problem mit einer staatenlosen Komponente. In mindestens React v16 können Sie einen Verweis auf das Element wie folgt erhalten:

%Vor%     
Geuis 03.10.2017 21:42
quelle

Tags und Links