2017-04-04

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都只要從初始化的時候追加就可以了！

React