2017-04-03

React.js開發入門教學(3)-取得輸入值

今天要來建立一個可以取到使用者輸入的值的表單！我們一樣先建立起一個處理傳值的方法

所以javascript的部份先寫成這樣

var form = React.createClass({
    render:function(){
        return React.DOM.div(  //建立一個裡面有一個input跟h2的區塊
            null,
            React.DOM.input({type: 'text'}),
            React.DOM.h2(null, 'TEST')
        )    
    }
  }
);

ReactDOM.render(
  React.createElement(form),
  document.getElementById('test')
);

接下來我們把這個 form的方法在做點修改，改成

var form = React.createClass({
    getInitialState: function() {  //初始化state裡面這個叫做val的變數
        return {
            val: ''
        };
    },
    showVal: function(e) {    //這邊是多寫一個方法來取得輸入的結果
        if(e.key === 'Enter')  //偵測到按下的鍵是ENTER的時候執行以下內容
            this.setState({
                val: e.target.value  //把現在所在的元件中的value內容全部塞給state裡的val
            });
    },
    render:function(){
        return React.DOM.div(
            null,
            React.DOM.input({type: 'text', onKeyPress: this.showVal}), //每當我敲下鍵盤就執行一次showVal
            React.DOM.h2(null, this.state.val) //顯示state中val的值
        )    
    }
  }
);

執行看看，是不是當你按下ENTER的時候，輸入框下方就會顯示剛剛輸入的結果呢？

我們來作點小變化，如果今天你不喜歡用enter，你就愛用一顆按鈕，那你也可以這樣寫

var form = React.createClass({
    getInitialState: function() {
        return {
            val: ''
        };
    },
    showVal: function(e) {
            this.setState({
                val: document.getElementById('input_a').value
            });
    },
    render:function(){
        return React.DOM.div(  //建立一個裡面有一個input跟h2的區塊
            null,
            React.DOM.input({type: 'text', id: 'input_a'}),
            React.DOM.input({type: 'button', value: '送出', onClick: this.showVal}),
            React.DOM.h2(null, this.state.val)
        )    
    }
  }
);

這樣就可以在你按下按鈕的時候取到你剛剛建立的input_a的值了！

React