1
Ich versuche eine Eingabe zu verwenden, um die Anzahl der Elemente einer Liste zu aktualisieren. Im Moment aktualisiert mein Code den Eingabewert korrekt, aber das Array, das ich zum Generieren der Liste verwende, wird nur aktualisiert, wenn ich das OnBlur-Ereignis zweimal aufruft. Ich weiß nicht, wo ich versage. Ich habe das OnChange-Ereignis verwendet und das Problem ist das gleiche. Die Funktion, die die Update-Logik behandelt ist UpdatelistReact Function aktualisiert den Status nur, wenn er zweimal aufgerufen wird.
Heres die jsBin http://jsbin.com/favabamitu/edit?html,js,console,output Arbeits
mein Code hier:
var InputData = React.createClass({
getInitialState: function() {
return({
number_of_locations: 4,
thickness_m: []
});
},
componentDidMount: function() {
for (var i = 0; i < this.state.number_of_locations; i++) {
this.state.thickness_m.push(0);
console.log("state has been intitialized");
}
},
UpdateList: function(event) {
var value = event.target.value;
var locations = parseInt(this.state.number_of_locations);
console.log("local locations value is "+ locations);
var thickness = this.state.thickness_m;
if (locations > thickness.length) {
var dif = locations - thickness.length;
for (var i = 0; i < dif; i++) {
thickness.push(0);
}
console.log('up with' + dif + 'dif');
} else if (locations < thickness.length) {
var dif = thickness.length - locations;
thickness.splice(0, dif);
console.log('down with' + dif + 'dif');
}
this.setState({
number_of_locations: value,
thickness_m: thickness
});
},
Lister: function(number, index) {
return (
<li key = {index}> {number}</li>
);
},
render: function() {
var thickness_values = this.state.thickness_m
return (
<div className="row">
<div className="col-md-6">
<div className="component">
<div className="form-group">
<label htmlFor="read-method">Reading Method</label>
<select className="form-control" name="read-method" id="read-method" required>
<option value="--">--</option>
<option value="1">Point Thickness Readings - PTR</option>
<option value="2">Critical Thickness Profiles - CTP</option>
</select>
</div>
<div className="form-group">
<label htmlFor="number-of-locations">Number of Locations</label>
<input onBlur={this.UpdateList}
defaultValue={this.state.number_of_locations}
className="form-control"
type="number"
max="50"
min="1"
id="number-of-locations"/>
</div>
<div className="form-group">
<label htmlFor="separation">Separation</label>
<input className="form-control" type="number" id="separation"/>
</div>
<div className="form-group">
<ul>
{thickness_values.map(this.Lister)}
</ul>
<small>your list now has {this.state.number_of_locations} items</small>
</div>
</div>
</div>
<div className="col-md-6">
hello
</div>
</div>
)
}
})
ReactDOM.render(<InputData /> ,
document.getElementById('input-measurement-data')
);<div id="input-measurement-data">
<!-- This element's contents will be replaced with your component. -->
</div>
<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>Jede Hilfe wäre sehr dankbar!
Es wäre einfacher zu debuggen, wenn es etwas gibt, gegen das das läuft. Kannst du den Code auf jsfiddle oder sowas setzen? – Chris
Lassen Sie mich aktualisieren :) –
Es scheint nicht zu laufen. Überprüfe die Konsole. – Chris