Reagieren die form Fehler beim ändern einer kontrollierten input vom Typ "text" werden unkontrollierte
Ich erstelle ein einfaches Formular mit reagieren mit kontrollierten Eingängen. In meiner Komponente Zustand, ich habe 2 Eigenschaften "clientName" und "Lizenz" auf den Staat. die änderung dieser funktioniert einwandfrei. Aber es gibt ein "Versand" - Eigenschaft ist ein Objekt. Ändern der Versand-Eigenschaften gibt einen Fehler. Zum Beispiel, wenn ich "adresse1", sobald der Staat in die handleShippingChange Funktion, bekomme ich die Fehlermeldung:
Achtung: TextField ändern einer kontrollierten input vom Typ text sein
unkontrollierte. Input-Elemente sollten nicht aus-Schalter gesteuert
unkontrollierte (oder Umgekehrt). Entscheiden zwischen der Verwendung eines kontrollierten oder
unkontrollierte input-element für die Lebensdauer der Komponente.
Ich vermute, es hat etwas damit zu tun, wie ich bin, definieren Sie den Wert für diejenigen, Textfeldern und wie ich die Einstellung der Staat für Versand Eigenschaften. Was mache ich falsch? Der code für meine Komponente unter:
JS:
import React, {Component} from 'react';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import 'whatwg-fetch';
class Clients extends Component {
constructor() {
super();
this.state = {
"clientName": "client name",
"shipping": {
"name": "name",
"address1": "address 1",
"address2": "address 2",
"city": "city",
"state": "state",
"zip": "zip",
"country": "country"
},
"license": "license"
};
this.handleChange = this.handleChange.bind(this);
this.handleShippingChange = this.handleShippingChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
};
handleChange(event) {
this.setState({
[event.target.name]: this.getFieldValue(event.target)
});
};
handleShippingChange(event) {
this.setState({
shipping: {
[event.target.name]: this.getFieldValue(event.target)
}
});
};
getFieldValue(target) {
return target.type === 'checkbox' ? target.checked : target.value;
};
handleSubmit = (event) => {
event.preventDefault();
//do some stuff
};
render() {
return <div>
<h1>
Clients Page
</h1>
<form onSubmit={this.handleSubmit}>
<TextField
hintText="Enter the client name"
floatingLabelText="Client Name"
value={this.state.clientName}
onChange={this.handleChange}
name="clientName"
/>
<h2>Shipping Info</h2>
<TextField
hintText=""
floatingLabelText="Name"
value={this.state.shipping.name}
onChange={this.handleShippingChange}
name="name"
/>
<br />
<TextField
hintText=""
floatingLabelText="Address Line 1"
value={this.state.shipping.address1}
onChange={this.handleShippingChange}
name="address1"
/>
<br />
<TextField
hintText=""
floatingLabelText="Address Line 2"
value={this.state.shipping.address2}
onChange={this.handleShippingChange}
name="address2"
/>
<br />
<TextField
hintText=""
floatingLabelText="City"
value={this.state.shipping.city}
onChange={this.handleShippingChange}
name="city"
/>
<br />
<TextField
hintText=""
floatingLabelText="State"
value={this.state.shipping.state}
onChange={this.handleShippingChange}
name="state"
/>
<br />
<TextField
hintText=""
floatingLabelText="Zip Code"
value={this.state.shipping.zip}
onChange={this.handleShippingChange}
name="zip"
/>
<br />
<TextField
hintText=""
floatingLabelText="Country"
value={this.state.shipping.country}
onChange={this.handleShippingChange}
name="country"
/>
<br />
<TextField
hintText=""
floatingLabelText="License"
value={this.state.license}
onChange={this.handleChange}
name="license"
/>
<br />
<RaisedButton label="OK" primary={true} type="submit" />
</form>
</div>
};
}
export default Clients;
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
Du musst angemeldet sein, um einen Kommentar abzugeben.
Kontrollierte/Unkontrollierte Eingabe bedeutet, wenn die
<input>
Feld einen Wert hat oder nicht.Die Idee ist, dass Sie nicht wollen, um zu ändern, von einer kontrollierten zu einer unkontrollierten Eingang. Beide Arten von input verhält sich das anders, und dies könnte möglicherweise dazu führen, dass Fehler und/oder Unstimmigkeiten.
Am einfachsten zu beheben ist, um sicherzustellen, es ist immer ein default-Wert (im Falle eines leeren Feldes, der Standard wäre eine leere Zeichenfolge
''
).Beachten Sie auch, dass einheitliche Arten sind in der Regel besser, als auf null festlegbaren Typen gegeben, Sie haben eine Garantie auf die Art von einem bestimmten Wert. Dies hilft viel bei der Verringerung der overhead durch die auf null prüft (
if (val != null) { /* ...etc */}
)Aber wenn Sie wollen einfach nur eine Zeile zu beheben, können Sie auch den default-Wert "inline" im jsx:
Das zugrunde liegende problem ist, dass die Art, wie ich mich festlegen einer Eigenschaft auf das shipping-Objekt, ist es nicht Zusammenführen der neue Wert der Eigenschaft mit den original-Eigenschaftswerten. Daher die Warnung war nicht für das Textfeld, dass ich die BEARBEITUNG, es war für die anderen der Versand Textfeldern fest, die waren immer hin und Weg. Ich bin mir nicht sicher, ob dies gängige Praxis, da ist es schwer, Beispiele zu finden, wo Sie arbeiten, ein Objekt in dem Zustand. Aber die Veränderung der handleShipping Methode, um diese Feste mein problem:
Im Grunde bin ich das erstellen einer Kopie der bestehenden Versand-Objekt vom Staat, die änderung und die Einstellung der gesamten Schifffahrt Objekt gleich an die veränderte Kopie.
var shipping = {...this.state.shipping, [event.target.name]: fieldVal}
var shipping = this.state.shipping
die sich der Staat, die Sie verwenden könnencloneDeep
auslodash
: lodash.com/docs/4.17.4#cloneDeepNur ich hatte das gleiche Problem aber es stellt sich heraus, der Fehler war so etwas viel einfacher (borderline-peinlich).
Ich vergessen, hinzuzufügen, die
event
parameter, wenn ich definiere meine onChange-Funktion.Seltsam, dass ich nicht
event is undefined
Fehler... Hoffe, das jemand hilft.