入力を使用してリストの項目数を更新しようとしています。今すぐコードが入力値を正しく更新していますが、OnBlurイベントを2回呼び出すと、リストを生成するために使用している配列が更新されています。私はどこに失敗しているのか分かりません。私はOnChangeイベントを使いましたが、問題は同じです。更新ロジックを処理 機能がUpdateListReact関数は2回呼び出されたときの状態を更新します
は、相続人jsBinはhttp://jsbin.com/favabamitu/edit?html,js,console,output
を働いているここに私のコードです:
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>
任意の助けをいただければ幸いです!
これを実行するものがあればデバッグするのが簡単です。コードをjsfiddleなどに置くことはできますか? – Chris
私にそれを更新させてください:) –
実行されていないようです。コンソールを確認してください。 – Chris