So deaktivieren Sie die Schaltfläche in React.js
Ich habe diese Komponente:
%Vor%Ich möchte, dass die Schaltfläche deaktiviert wird, wenn der Eingabewert leer ist. Aber der obige Code funktioniert nicht. Es sagt:
add-item.component.js: 78 Uncaught TypeError: Die Eigenschaft 'value' von undefined
kann nicht gelesen werden
zeigt auf disabled={!this.input.value} . Was kann ich hier falsch machen? Ich vermute, dass ref möglicherweise noch nicht erstellt wird, wenn render Methode ausgeführt wird. Wenn, so was ist das Workaround?
4 Antworten
Die Verwendung von refs ist keine bewährte Methode, da das DOM direkt gelesen wird. Stattdessen ist es besser, Reacts state zu verwenden. Außerdem ändert sich Ihre Schaltfläche nicht, da die Komponente nicht neu gerendert wird und in ihrem ursprünglichen Zustand verbleibt.
Sie können setState zusammen mit einem onChange -Ereignis-Listener verwenden, um die Komponente jedes Mal erneut zu rendern, wenn sich das Eingabefeld ändert:
Hier ist ein funktionierendes Beispiel:
Sie sollten den Wert der Eingabe nicht durch Refs festlegen.
Sehen Sie sich die Dokumentation für kontrollierte Formularkomponenten an - Ссылка
Auf den Punkt gebracht
%Vor% Dann können Sie den deaktivierten Zustand mit disabled={!this.state.value}
this.input ist undefiniert, bis der ref Callback aufgerufen wird. Versuchen Sie, this.input auf einen Anfangswert in Ihrem Konstruktor zu setzen.
Von die React-Dokumentation für Refs , Hervorhebung von mir:
Der Callback wird sofort ausgeführt, nachdem die Komponente eingehängt oder abgehängt wurde
Tags und Links javascript reactjs