React（5） --綁定函數事件

綁定函數事件

在以類繼承的方式定義的組件中，爲了能方便地調用當前組件的其餘成員方法或屬性（如：this.state），一般須要將事件處理函數運行時的 this 指向當前組件實例。

run(){
    alert('我是一個run方法')
}

<button onClick={this.run}>執行方法</button> 

//方法不須要加(),加了(),一旦頁面加載進來就執行了 

綁定事件處理函數this的幾種方法：

方法1：

run(){
     alert(this.state.name)
}
<button onClick={this.run.bind(this)}>按鈕</button>  //不綁定this的話，上面的方法裏面的this就指向不了，拿不到數據

方法2：

constructor(props){
        super(props);   //固定寫法
        this.state={
            name:'我是一個home組件' 
        }   
        //構造函數中改變
        this.run = this.run.bind(this);
  }

run(){
        alert(this.state.name)
}
<button onClick={this.run}>按鈕</button>

方法3：

//直接使用箭頭函數 
run=()=> {
        alert(this.state.name)
 }

<button onClick={this.run}>按鈕</button>

函數方法裏傳值，改變state的值

setName=(str)=>{
      //改變state的值
      this.setState({
          username:str
      })
}

<button onClick={this.setName.bind(this,'張三')}>執行方法傳值</button>

<button onClick={this.setName.bind(this,'張三','李四')}>執行方法傳值</button> 

 獲取dom節點方法

方法1：

run=(event)=> {
        //alert(event.target)  //獲取執行事件的dom節點
        //alert(event.target.getAttribute('aid'))  //獲取dom的屬性
        event.target.style.background='red';
 }

<button aid="123" onClick={this.run}>按鈕</button>

 方法2：

import React from 'react';

class List extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            username:''
         };
    }
    inputChange=()=>{
        /*
            獲取dom節點
                一、給元素定義ref屬性
                    <input ref="username" />
                二、經過this.refs.username 獲取dom節點
        
        */
        let val=this.refs.username.value;
        this.setState({
            username:val
        })
    }
    getInput=()=>{
        alert(this.state.username);
    }
    //鍵盤事件
    inputKeyUp=(e)=>{
        console.log(e.keyCode);
        if(e.keyCode==13){
            alert(e.target.value);
        }
    }
    inputonKeyDown=(e)=>{
        console.log(e.keyCode);
        if(e.keyCode==13){
            alert(e.target.value);
        }
    }
    render() {
        return (
            <div>  
                  {/* 獲取表單的值

                一、監聽表單的改變事件                        onChange
                二、在改變的事件裏面獲取表單輸入的值            ref獲取 
                三、把表單輸入的值賦值給username              this.setState({})
                四、點擊按鈕的時候獲取 state裏面的username     this.state.username
                 */}
                <input ref="username" onChange={this.inputChange}/> <button onClick={this.getInput}>獲取input的值</button>
                <br /><br /> <hr />  
                <h2>鍵盤事件</h2>
                <input onKeyUp={this.inputKeyUp}/>
                <br /><br />
                <input onKeyDown={this.inputonKeyDown}/>
            </div>
        );
    }
}

export default List;