मैं जेएससी रिएक्ट करने के लिए बहुत नया हूं (जैसा कि अभी शुरू हुआ है)। मुझे समझ नहीं आया कि कैसे काम करता है। मैं उपयोगकर्ता इनपुट के आधार पर एक ग्रिड बनाने के लिए रिएक्ट और ईज़ेल जेएस का संयोजन कर रहा हूं। यहाँ मेरा JS बिन है: http://jsbin.com/zatula/edit?js,output
यहाँ कोड है:
var stage;
var Grid = React.createClass({
getInitialState: function() {
return {
rows: 10,
cols: 10
}
},
componentDidMount: function () {
this.drawGrid();
},
drawGrid: function() {
stage = new createjs.Stage("canvas");
var rectangles = [];
var rectangle;
//Rows
for (var x = 0; x < this.state.rows; x++)
{
// Columns
for (var y = 0; y < this.state.cols; y++)
{
var color = "Green";
rectangle = new createjs.Shape();
rectangle.graphics.beginFill(color);
rectangle.graphics.drawRect(0, 0, 32, 44);
rectangle.x = x * 33;
rectangle.y = y * 45;
stage.addChild(rectangle);
var id = rectangle.x + "_" + rectangle.y;
rectangles[id] = rectangle;
}
}
stage.update();
},
updateNumRows: function(event) {
this.setState({ rows: event.target.value });
this.drawGrid();
},
updateNumCols: function(event) {
this.setState({ cols: event.target.value });
this.drawGrid();
},
render: function() {
return (
<div>
<div className="canvas-wrapper">
<canvas id="canvas" width="400" height="500"></canvas>
<p>Rows: { this.state.rows }</p>
<p>Columns: {this.state.cols }</p>
</div>
<div className="array-form">
<form>
<label>Number of Rows</label>
<select id="numRows" value={this.state.rows} onChange={ this.updateNumRows }>
<option value="1">1</option>
<option value="2">2</option>
<option value ="5">5</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
<label>Number of Columns</label>
<select id="numCols" value={this.state.cols} onChange={ this.updateNumCols }>
<option value="1">1</option>
<option value="2">2</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</form>
</div>
</div>
);
}
});
ReactDOM.render(
<Grid />,
document.getElementById("container")
);
आप JS बिन में देख सकते हैं जब आप एक ड्रॉपडाउन के साथ पंक्तियों या स्तंभों की संख्या बदलते हैं, तो पहली बार कुछ भी नहीं होगा। अगली बार जब आप एक ड्रॉपडाउन मान बदलते हैं, तो ग्रिड पिछले राज्य की पंक्ति और स्तंभ मानों पर आ जाएगा। मैं अनुमान लगा रहा हूं कि यह इसलिए हो रहा है क्योंकि setState पूरा होने से पहले मेरा this.drawGrid () फ़ंक्शन निष्पादित हो रहा है। शायद कोई और कारण है?
आपके समय एवं मदद के लिए धन्यवाद!