react之事件處理

久宇詩發表於2021-10-12
React事件

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來呼叫

相關文章