事件處理 (精讀React官方文檔—06)

這是我參與更文挑戰的第19天，活動詳情檢視： 更文挑戰

React中的事件處理

• React中的事件的命名采用小駝峰的命名方式，小駝峰的執行個體onClcik
• 傳統的HTML事件處理函數傳入的是一個字元串

<button onclick="activateLasers()">
  Activate Lasers
</button>
複制代碼      

• React中事件處理通過大括号進行包裹

<button onClick={activateLasers}>
  Activate Lasers
</button>
複制代碼      

• 在React中要想阻止預設行為必須要通過preventDefault，不能通過傳回false的方式。

傳統的 HTML 中阻止表單的預設送出行為。

<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submit</button>
</form>
複制代碼      

React中阻止表單的預設送出行為

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }
  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}
複制代碼      

• React監聽DOM元素，一般不是通過addEventListener。而是通過元件中的方法。
• 謹慎的對待JSX文法中回調函數的this,class的方法預設不會綁定this,為了解決這類問題，我們一般在回調函數中使用箭頭函數。

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }
  render() {
    // 此文法確定 `handleClick` 内的 `this` 已被綁定。
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }
}
複制代碼      

向事件處理程式傳遞參數

官方描述：在循環中，通常我們會為事件處理函數傳遞額外的參數。例如，若 id 是你要删除那一行的 ID，以下兩種方式都可以向事件處理函數傳遞參數。

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
複制代碼      

• 上面的兩種方式是等價的，一種是通過箭頭函數，一種是通過bind來綁定JSX回調函數中的this，然後傳入參數。

官方描述：在這兩種情況下，React 的事件對象 e 會被作為第二個參數傳遞。如果通過箭頭函數的方式，事件對象必須顯式的進行傳遞，而通過 bind 的方式，事件對象以及更多的參數将會被隐式的進行傳遞。

解讀

• 通過箭頭函數的方式，事件對象需要顯示傳遞，而通過bind則可以進行隐式傳遞。

歡迎大家關注我的專欄，一起學習React官方文檔，每日更新哦！