Ich habe eine einfache Reaktionskomponente mit der Form, von der ich glaube, dass sie eine kontrollierte Eingabe hat:
import React from 'react';
export default class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
return (
<form className="add-support-staff-form">
<input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/>
</form>
)
}
onFieldChange(fieldName) {
return function (event) {
this.setState({[fieldName]: event.target.value});
}
}
}
export default MyForm;
Wenn ich meine Anwendung ausführe, wird folgende Warnung angezeigt:
Warnung: MyForm ändert eine unkontrollierte Eingabe von zu steuerndem Text. Eingangselemente sollten nicht von unkontrolliert zu kontrolliert (oder umgekehrt) wechseln. Entscheiden Sie sich für die Lebensdauer der Komponente zwischen der Verwendung eines gesteuerten oder unkontrollierten Eingabeelements
Ich glaube, meine Eingabe wird gesteuert, da sie einen Wert hat. Ich frage mich, was mache ich falsch?
Ich benutze React 15.1.0
quelle
name={'question_groups.${questionItem.id}'}
?value
Requisite einen Wert ungleich Null / undefiniert hat. Die Requisite muss keiner Zustandsvariablen entsprechen (sie kann nur eine Konstante sein und die Komponente wird weiterhin als gesteuert betrachtet). Adams Antwort ist korrekter und sollte akzeptiert werden.Wenn Sie Ihre Komponente zum ersten Mal rendern,
this.state.name
ist sie nicht festgelegt, sodass sie alsundefined
oder ausgewertetnull
wird und Sie am Endevalue={undefined}
odervalue={null}
an Ihre übergebeninput
.Wenn ReactDOM prüft, ob ein Feld gesteuert wird, prüft es, ob es vorhanden ist
value != null
(beachten Sie!=
, dass dies nicht der!==
), undundefined == null
entscheidet in JavaScript, dass es nicht kontrolliert wird.Wenn
onFieldChange()
also aufgerufenthis.state.name
wird, auf einen Zeichenfolgenwert gesetzt wird, geht Ihre Eingabe von unkontrolliert zu kontrolliert über.Wenn Sie dies
this.state = {name: ''}
in Ihrem Konstruktor tun'' != null
, hat Ihre Eingabe die ganze Zeit über einen Wert, und diese Nachricht verschwindet.quelle
this.props.<whatever>
, was für mich das Problem war. Danke, Adam!render()
, oder einen Ausdruck im Tag selbst übergeben - alles, was ausgewertet wirdundefined
. Froh, dass ich helfen konnte!name
".undefined
zunächst übergeben wird. Es ist vielmehr die Tatsache, dassthis.state.name
es keine Zustandsvariable gibt, die die Eingabe unkontrolliert macht. Zum Beispielthis.state = { name: undefined };
würde dies dazu führen , dass die Eingabe gesteuert wird. Es versteht sich, dass es darauf ankommt, woher der Wert kommt, nicht darauf, was der Wert ist.this.state = { name: undefined }
hätte immer noch zu einer unkontrollierten Eingabe.<input value={this.state.name} />
Desugars zuReact.createElement('input', {value: this.state.name})
. Da der Zugriff auf eine nicht vorhandene Eigenschaft eines Objekts zurückgegeben wirdundefined
, wird genau der gleiche Funktionsaufruf ausgewertet -React.createElement('input', {value: undefined})
ob ername
nicht festgelegt oder explizit festgelegt istundefined
, sodass sich React auf dieselbe Weise verhält. Sie können dieses Verhalten in dieser JSFiddle sehen.Ein anderer Ansatz könnte darin bestehen, den Standardwert in Ihrer Eingabe wie folgt festzulegen:
quelle
Ich weiß, dass andere dies bereits beantwortet haben. Aber ein sehr wichtiger Faktor, der anderen Menschen helfen kann, die ein ähnliches Problem haben:
onChange
In Ihrem Eingabefeld muss ein Handler hinzugefügt sein (z. B. textField, Kontrollkästchen, Radio usw.). Behandeln Sie Aktivitäten immer über denonChange
Handler.Beispiel:
Wenn Sie mit Kontrollkästchen arbeiten Sie möglicherweise dessen
checked
Status mit bearbeiten!!
.Beispiel:
quelle
Eine einfache Lösung zur Behebung dieses Problems besteht darin, standardmäßig einen leeren Wert festzulegen:
quelle
Ein möglicher Nachteil beim Setzen des Feldwerts auf "" (leere Zeichenfolge) im Konstruktor besteht darin, dass das Feld ein optionales Feld ist und unbearbeitet bleibt. Sofern Sie vor dem Versenden Ihres Formulars keine Massagen durchführen, bleibt das Feld als leere Zeichenfolge anstelle von NULL in Ihrem Datenspeicher erhalten.
Diese Alternative vermeidet leere Zeichenfolgen:
quelle
Wenn Sie
onChange={this.onFieldChange('name').bind(this)}
in Ihrer Eingabe verwenden, müssen Sie Ihre leere Statuszeichenfolge als Wert des Eigenschaftsfelds deklarieren.falscher Weg:
der richtige Weg:
quelle
In meinem Fall fehlte mir etwas wirklich Triviales.
<input value={state.myObject.inputValue} />
Mein Zustand war der folgende, als ich die Warnung erhielt:
Durch Abwechseln meines Status, um auf die Eingabe meines Werts zu verweisen , wurde mein Problem gelöst:
quelle
Wenn die Requisiten für Ihre Komponente als Status übergeben wurden, geben Sie einen Standardwert für Ihre Eingabe-Tags ein
quelle
Setzen Sie im Ausgangszustand einen Wert auf die Eigenschaft 'name'.
quelle
Ein Update dafür. Für React Hooks verwenden
const [name, setName] = useState(" ")
quelle
" "
und nicht""
? Dies führt dazu, dass Sie jeglichen Hinweistext verlieren. Wenn Sie auf klicken und tippen, wird vor den von Ihnen eingegebenen Daten ein hinterhältiger Bereich angezeigt.Dies geschieht im Allgemeinen nur, wenn Sie den Wert der Datei beim Start der Anwendung nicht steuern und nachdem ein Ereignis oder eine Funktion ausgelöst oder der Status geändert wurde, versuchen Sie nun, den Wert im Eingabefeld zu steuern.
Dieser Übergang, keine Kontrolle über die Eingabe zu haben und dann die Kontrolle darüber zu haben, führt dazu, dass das Problem überhaupt erst auftritt.
Der beste Weg, dies zu vermeiden, besteht darin, einen Wert für die Eingabe im Konstruktor der Komponente zu deklarieren. Damit das Eingabeelement vom Start der Anwendung an Wert hat.
quelle
Um die Statuseigenschaften für Formulareingaben dynamisch festzulegen und zu steuern, können Sie Folgendes tun:
quelle
Erstellen Sie einfach einen Fallback auf '', wenn der Name this.state.name null ist.
Dies funktioniert auch mit den useState-Variablen.
quelle