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來調用