Ich habe Probleme beim Aktualisieren des Kontrollkästchenstatus, nachdem ihm checked="checked"
in React der Standardwert zugewiesen wurde .
var rCheck = React.createElement('input',
{type: 'checkbox', checked:'checked', value: true},
'Check here');
Nach dem Zuweisen checked="checked"
kann ich den Status des Kontrollkästchens nicht durch Klicken zum Deaktivieren / Aktivieren aktivieren.
Antworten:
Um mit dem Kontrollkästchen zu interagieren, müssen Sie den Status des Kontrollkästchens aktualisieren, sobald Sie es ändern. Und um eine Standardeinstellung zu haben, können Sie verwenden
defaultChecked
.Ein Beispiel:
quelle
render
mit dem obigen<input>
Element verwenden. DasdefaultChecked
kann als Parameter wie angegeben bereitgestellt werdenchecked
.Es gibt einige Möglichkeiten, dies zu erreichen. Hier einige:
Geschrieben mit State Hooks :
Hier ist eine Live-Demo auf JSBin .
Geschrieben mit Komponenten :
Hier ist eine Live-Demo auf JSBin .
quelle
Wenn das Kontrollkästchen nur mit erstellt
React.createElement
wird, wird die EigenschaftdefaultChecked
verwendet.Gutschrift an @nash_ag
quelle
Oder
Weitere Informationen
defaultChecked
zum Kontrollkästchen finden Sie unten: https://reactjs.org/docs/uncontrolled-components.html#default-valuesquelle
Zusätzlich zur richtigen Antwort können Sie einfach Folgendes tun: P.
quelle
checked
.Es funktioniert
Und Funktion init es
quelle
Sie können "true" oder "" an die aktivierte Eigenschaft des Eingabe-Kontrollkästchens übergeben. Die leeren Anführungszeichen ("") werden als falsch verstanden und das Element wird deaktiviert.
quelle
true
für das boolesche Attribut wurde empfangenchecked
. Obwohl dies funktioniert, funktioniert es nicht wie erwartet, wenn Sie die Zeichenfolge" false "übergeben. Meinten Sie geprüft = {wahr}? "In meinem Fall hatte ich das Gefühl, dass "defaultChecked" mit Zuständen / Bedingungen nicht richtig funktioniert. Also habe ich "checked" mit "onChange" verwendet, um den Status umzuschalten.
Z.B.
quelle
Hier ist ein Code, den ich vor einiger Zeit gemacht habe. Er könnte nützlich sein. du musst mit dieser Zeile spielen => this.state = {geprüft: falsch, geprüft2: wahr};
CSS
HTML
Hier ist der Codepen => http://codepen.io/parlop/pen/EKmaWM
quelle
Mach es dir nicht zu schwer. Verstehen Sie zunächst ein einfaches Beispiel, das unten angegeben ist. Es wird dir klar sein. In diesem Fall wird unmittelbar nach dem Drücken des Kontrollkästchens der Wert aus dem Status abgerufen (anfangs ist er falsch), in einen anderen Wert geändert (anfangs ist er wahr) und der Status entsprechend festgelegt. Wenn das Kontrollkästchen zum zweiten Mal gedrückt wird, wird der gleiche Vorgang erneut ausgeführt. Nehmen Sie den Wert (jetzt ist er wahr), ändern Sie ihn (in false) und setzen Sie den Status entsprechend (jetzt ist er wieder false. Der Code wird unten geteilt.
Teil 1
Teil 2
Teil 3
quelle
Dies kann mit reinem js erfolgen
quelle
Das obige Handle gibt den Wert true oder false an, wenn aktiviert oder deaktiviert
quelle
Ich habe den Status als einen beliebigen [] Typ festgelegt. und setzen Sie im Konstruktor den Status auf null.
Im Eingabeelement
this.onServiceChange (e)} /> this.onServiceChange (e)} /> this.onServiceChange (e)} /> this.onServiceChange (e)} />
Ich habe es nach einiger Zeit herausgefunden. Ich dachte, es könnte euch allen helfen :)
quelle