2017-04-05

React.js開發入門教學(6)-ES6寫法與屬性

前面先閑話家常一下~今天幫別家公司的系統追加密碼強化的功能時，發現點忘記密碼後會發一封有附有HASH的URL到我的信箱

讓我直接連過去改密碼。看了一下代碼，發現一件很逗的事情就是他們為了後續作業的方便，在一進到那個畫面之後，就利用網

址上的HASH算出使用者的帳號，然後把使用者做自動登入後把訊息都放在Session中…我就想，這樣我根本不用改密碼了吧

我直接不改密碼，馬上輸入後台首頁網址，果不其所然直接登入成功XD。這時候在自己去編輯自己的密碼就好了（茶

也就是說今天如果我知道某人的信箱密碼，那我就可以靠這招進到他的帳號裡了XD，但前提是你要先駭到的信箱密碼！

好了，講完，繼續來學習 React.js 吧～今天看了書發現我的寫法與別人不太一樣，才知道原來早就有ES6的寫法，我學的

class Showsomething extends React.Component {
      constructor(props) {
        super(props);
        this.state = {};
    }
    render() {
        return (
            <div>
                <h1>{this.props.name}</h1>
            </div>
        )
    }
}

ReactDOM.render(
      <Showsomething name="Leo"/>,
      document.getElementById('test')
);

從寫法可以感覺出來變成了一種感覺很像物件導向語言的感覺。但查了資料發現只是「看起來」像而已啦XD

將原本建立類別的

var XXX = React.creatClass({});

改為

class XXX extends React.Component {}

當然 render　是一定得要有的，只是從 render: function(){} 改成了 render(){}

其中一點最重要的是，多了建構子！如果要在這個類別中初始化 state的話，一定要記得放建構子！不然可就不能用了！

所以我們在繼續把範例改寫看看

class Showsomething extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
            checkboxs: [
                {ck_id : 1, checked : false},
                {ck_id : 2, checked : false},
            ]
        };
    }
    chkChecked(ck_id, all) {
        var stateCopy = Object.assign({}, this.state);
        var i = 0;
        this.state.checkboxs.map(function(val){
            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() {
        var checkboxs_dom = this.state.checkboxs.map(function (chk){
            return (
                <div>
                    <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));
        return (
            <div>
                <h1>{this.props.name}</h1>
                <input type="button" value="全選" onClick={this.chkChecked.bind(this,this.null,true)} />
                {checkboxs_dom}
            </div>
        )
    }
}

ReactDOM.render(
      <Showsomething name="Leo"/>,
      document.getElementById('test')
);

好像有種在寫原本的javascript的感覺了呢！

這邊順便學習一下TAG上屬性的寫法！在JSX上可以利用Spread Attributes來存放各種屬性，寫法如下

var input_attr = {
      type: 'text',
      readOnly: true
}
class Showsomething extends React.Component {
      constructor(props) {
        super(props);
        this.state = {};
    }
    render() {
        return (
            <div>   //記得前面有三個點才表示全部喔
                <input {...input_attr} value={this.props.name}/>
            </div>
        )
    }
}

ReactDOM.render(
      <Showsomething name="Leo"/>,
      document.getElementById('test')
);

這樣我們就可以把相同屬性的標籤全部都用同樣的變數帶入就可以啦！

React