আমি জেএসকে প্রতিক্রিয়া জানাতে খুব নতুন (যেমন, আজই শুরু হয়েছে)। সেটস্টেট কীভাবে কাজ করে তা আমি পুরোপুরি বুঝতে পারি না। আমি ব্যবহারকারী ইনপুটের উপর ভিত্তি করে গ্রিড আঁকার জন্য প্রতিক্রিয়া এবং ইজেল জেএসকে একত্রিত করছি। এখানে আমার জেএস বিন: http://jsbin.com/zatula/edit?js , আউটপুট
কোডটি এখানে:
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")
);
আপনি জেএস বিনে দেখতে পাবেন যখন আপনি একটি ড্রপডাউনগুলির সাথে সারি বা কলামগুলির সংখ্যা পরিবর্তন করবেন, প্রথমবার কিছুই হবে না। পরের বার আপনি যখন একটি ড্রপডাউন মান পরিবর্তন করবেন, গ্রিডটি পূর্বের রাজ্যের সারি এবং কলাম মানগুলিতে আঁকবে। আমি অনুমান করছি যে এটি ঘটছে কারণ আমার এই.ড্রেগ্রিগ্রিড () ফাংশনটি সেটস্টেটটি সম্পূর্ণ হওয়ার আগেই সম্পাদন করছে। অন্য কোনও কারণ থাকতে পারে?
আপনার সময় এবং সাহায্যের জন্য ধন্যবাদ!