react之事件處理

久宇詩發表於2021-10-12

1、事件繫結

React 元素的事件處理和 DOM 元素的很相似,但是有一點語法上的不同:

  • React 事件的命名採用小駝峰式,而不是純小寫。
    onClick  onChange
    
  • 使用 JSX 語法時你需要傳入一個函式作為事件處理函式,而不是一個字串。
    onClick={this.fn}
    
  • 類元件與函式元件繫結事件是差不多的,只是在類元件中繫結事件函式的時候需要用到this,代表指向當前的類的引用,在函式中不需要呼叫this
    export default class extends React.Component {
        clickHandle(e){
            console.log('點了')
        }
        render(){
            return (
                <div><button onClick = {this.clickHandle}>點我點我點我</button></div>
            )
        }
    }
    
    const Items=({title,num})=>{
        const fn=()=>{
            console.log('hggg')
        }
        return(
            <div>
                <h2>{title}</h2>
                <button onClick={fn}></button>
            </div>
        )
    }
    

2、this指向問題

  1. 直接在render裡寫行內的箭頭函式(不推薦)
    <button onClick={(evt) => this.fun(evt)}>按鈕</button>
    
  2. 直接在元件內定義一個非箭頭函式的方法,然後在render裡直接使用(不推薦)
    <button onClick={this.fun.bind(this)}>按鈕</button>
    
  3. 在元件內使用箭頭函式定義一個方法(推薦)
     <button onClick={this.fun(evt)}>按鈕</button>
     // 通過箭頭函式定義事件方法,也能解決this指向問題
     fn = (evt) => {
         alert(123);
     }
    
  4. 直接在元件內定義一個非箭頭函式的方法,然後在constructor裡bind(this)(推薦)
    constructor(props){
        super(props)
        // 在構造方法中指定this指向  <button onClick={this.fun()}>按鈕</button>
        this.fun = this.fun.bind(this)
    }
    

3、事件物件

React中可以通過事件處理函式的引數獲取到事件物件,它的事件物件叫做:合成事件
即相容所有瀏覽器,無需擔心跨瀏覽器相容問題,此事件物件還擁有和瀏覽器原生事件相同的介面,包括 stopPropagation()和 preventDefault()
如果你想獲取到原生事件物件,可以通過 e.nativeEvent 屬性來進行獲取

  • 獲取原生事件物件:e.nativeEvent
  • 獲取數值:e.target.value
export default class extends React.Component {
    clickHandle(e){
        // 獲取原生事件物件
        console.log(e.nativeEvent)
    }
    render(){
        return (
            <div><button onClick = {this.clickHandle}>點我點我點我</button></div>
        )
    }
}

4、事件的引數傳遞

  1. render裡呼叫方法的地方外面包一層箭頭函式
  2. render裡通過this.handleEvent.bind(this, 引數)這樣的方式來傳遞
  3. 通過event傳遞
  4. 比較推薦的是做一個子元件, 在父元件中定義方法,通過props傳遞到子元件中,然後在子元件件通過this.props.method來呼叫

相關文章