React（腳手架）——create-react-app擼api（三）

還是再講一下this的問題，es6方法它的this是預設沒有繫結的，因此run方法可以執行但是getState方法執行報錯，因此還是要有這個習慣，bind（this）

這樣其實原型上還是es5的概念，個人比較喜歡前面的寫法，傳參的使用bind（this，‘引數’，‘引數’）

這個之前都寫過，回顧一下

來看看什麼是事件物件

    import React,{Component} from 'react'
    import '../assets/css/Home.css'
    class Home extends Component{
        constructor(){
            super()
            this.state={
                msg:'我是Home元件'
            }
        }
        

        render(){
            return(
            <div>
                    {this.state.msg}
                    {/*事件物件*/}
                    <hr/>
                    <button>事件物件</button>
            </div>
            )
        }
    }

    export default Home

之前我也寫到過，但是沒細講

在觸發DOM上的某個事件時，會產生事件物件（event），這個物件包含著所有與事件有關的資訊

event.target獲取事件的DOM節點，這個是比較常用的，獲取到節點就可以做些事了

比如改變它的文字顏色

    import React,{Component} from 'react'
    import '../assets/css/Home.css'
    class Home extends Component{
        constructor(){
            super()
            this.state={
                msg:'我是Home元件',
                inputValue:''
            }
        }
        
        run(event){
            console.log(event.target)
            event.target.style.color='red'
        }

        change(event){
            this.setState({inputValue:event.target.value})
        }
        
        value(){
            console.log(this.state.inputValue)
        }
        render(){
            return(
            <div>
                    {this.state.msg}
                    {/*事件物件*/}
                    <hr/>
                    <button onClick={this.run.bind(this)}>事件物件</button>
                    
                    <hr/>
                    <input defaultValue={this.state.inputValue} onChange={this.change.bind(this)}/>
                    <br/>
                    <button onClick={this.value.bind(this)}>獲取input的值</button>
            </div>
            )
        }
    }

    export default Home

也過一遍表單的方法，看過基礎的肯定覺得很簡單，先設定state預設值，根據input的onChange改變state的預設值，然後通過button獲取這個state

推薦安裝一個外掛

這裡的話有許多命令，快速搭建佈局，這裡只需要打個cccs，就快速搭建了

    import React,{Component} from 'react'
    class New extends Component {
        constructor(props) {
            super(props);
            this.state = {  };
        }
        inputKey(event){
        console.log(event.keyCode)
        }
        render() {
            return (
            <div>
                <h2>鍵盤事件</h2>
                <input onKeyUp={this.inputKey.bind(this)} />
            </div>
            );
        }
    }

    export default New;

鍵盤事件onKey**
比如我們做登入的時候，判斷回車 keycode==13 很方便哈

最後寫個簡易雙向資料繫結

    import React,{Component} from 'react'
    class New extends Component {
        constructor(props) {
            super(props);
            this.state = {  value:''};
        }

        inputChange(e){
          this.setState({
              value:e.target.value
          })
        }
        
        render() {
            return (
            <div> 
                 {/*雙向資料繫結  model改變影響view  view改變反過來影響model*/}
                 <input defaultValue={this.state.value}  onChange={this.inputChange.bind(this)}/>
                 <p>{this.state.value}</p>
            </div>
            );
        }
    }

    export default New;