React.js開發入門教學(5)-CheckBox
我們在前端常常要處理後端取來的值,這時候經常會用到判斷與顯示真偽,我看了看書,在JSX中也有
相當容易的寫法,判斷的寫法與原本javascript或是PHP幾乎是完全一樣,也就是用「?:」就可以
了。讓我們來寫看看~
var Showsomething = React.createClass({
render: function() {
return (
<div>
<h1>{this.props.name.length > 3 ? this.props.name : 'Something'}</h1>
</div>
);
}
});
ReactDOM.render(
<Showsomething name="Leo"/>,
document.getElementById('test')
);
這樣子顯示的結果應該會是「Something」而不是「Leo」。
那我們再來建一些 CheckBox 或是 SelectList 看看。
var Showsomething = React.createClass({
getInitialState: function () {
return {
check: true
};
},
render: function() {
return (
<div>
<h1>{this.props.name.length > 3 ? this.props.name : 'Something'}</h1>
<input id="ck_1" type="checkbox" checked={this.state.check} />
</div>
);
}
});
ReactDOM.render(
<Showsomething name="Leo"/>,
document.getElementById('test')
);
這樣就可以初始化一開始 Checkbox的值了!但是你會發現你怎麼點都沒辦法取消勾勾…那是因為state中check的值一直都被
鎖住的狀態,所以我們用之前學到的方法再加上一些…
var Showsomething = React.createClass({
getInitialState: function () {
return {
check: true
};
},
chkChecked: function (e) {
(this.state.check) ? this.setState({check:false}) : this.setState({check:true})
},
render: function() {
return (
<div>
<h1>{this.props.name.length > 3 ? this.props.name : 'Something'}</h1>
<input id="ck_1" type="checkbox" checked={this.state.check} onChange={this.chkChecked}/>
</div>
);
}
});
ReactDOM.render(
<Showsomething name="Leo"/>,
document.getElementById('test')
);
這樣就可以啦!
或許有人會說我一個畫面有一百個 CheckBox ,要是這樣寫我豈不是寫到老?? 所以我們再把他進化一下!
var Showsomething = React.createClass({
getInitialState: function () {
return {
checkboxs: [ //這邊把checkbox做成陣列
{ck_id : 1, checked : false},
{ck_id : 2, checked : false},
]
};
},
chkChecked: function (ck_id, all) { //方法裡面傳入被選擇的ID與是否全選
var stateCopy = Object.assign({}, this.state);
var i = 0;
this.state.checkboxs.map(function (val, i){
if(all) {
stateCopy.checkboxs[i].checked = true;
} else {
if(val.ck_id == ck_id) {
stateCopy.checkboxs[i].checked = !val.checked;
}
}
i++;
});
this.setState(stateCopy);
},
render: function() {
//利用已經初始化的陣列來作假想DOM
var checkboxs_dom = this.state.checkboxs.map(function (chk, i){
return (
<div key={i}> //這裡不要忘記加上key,如果沒有的話還是能夠執行成功,但是react會出警告,因為他會沒辦法分辨做好的DOM!
<input id={chk.ck_id} type="checkbox" checked={chk.checked} onChange={this.chkChecked.bind(this, chk.ck_id, false)}/><label>{chk.ck_id}</label>
</div>
);
}.bind(this)); //要在Showsomething裡面可以存取這個必須得加上bind(this)
return (
<div>
<h1>{this.props.name.length > 3 ? this.props.name : 'Something'}</h1>
<input type="button" value="全選" onClick={this.chkChecked.bind(this, null, true)} />
{checkboxs_dom} //這裡把剛剛做好的DOM都塞進去
</div>
);
}
});
ReactDOM.render(
<Showsomething name="Leo"/>,
document.getElementById('test')
);
這樣就搞定啦,不管要幾個checkbox都只要從初始化的時候追加就可以了!