react文檔 docs Handling Events

處理 Events

使用 React element 處理事件很是相似於 DOM 元素處理事件。只是語法略有不一樣：

• React 事件命名使用小駝峯，而不是小寫。
• 經過 JSX 傳遞一個函數做爲時間處理者，而不是字符串。

例如，HTML中：

<button onclick="activateLasers()">
  Activate Lasers
</button>

React 中略有不一樣：

<button onClick={activateLasers}>
  Activate Lasers
</button>

另外一個不一樣是在 React 中不能經過返回 false 來阻止默認行爲。必須明確調用 preventDefault。例如，普通 HTML 阻止默認連接打開一個新頁面的行爲，你能夠寫：

<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>

React 中，替代方法爲：

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }
  
  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

這裏， e 是一個合成事件。 React 根據 WEC spec定義這些合成事件， 因此不須要擔憂跨瀏覽器兼容問題。 點擊SyntheticEvent 參考指導查看更多.

使用 React 你一般不須要調用 addEventListener 來給你一個已建立的 DOM 元素添加監聽器。 相反，只在元素初始化渲染的時候提供監聽器。

使用 [ES6 class]()定義一個組件，一個常見模式是類中一個方法爲一個事件處理者.例如， Toggle 組件渲染一個按鈕讓用戶在 "ON" 和 "OFF" 中切換：

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    this.handleClick = this.handleClick.bind(this);
  }
   
  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF' }
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

[在線嘗試]()

必定要當心 JSX 回調中 this 的含義。在 JavaScript 中， 類方法默認不[綁定]()。若是忘記綁定 this.handleClick 傳遞它給 onClick, this 在函數實際調用的時候會變成 undefined.

這不是 React 特殊行爲；是 [JavaScript 中函數如何運做]()。一般，你引用一個方法後面不帶 () 。例如， onClick={this.handleClick}, 你應該綁定這個方法。

若是 bind(綁定)讓你很煩，兩種方式能夠處理。若是你使用實驗性的 [public class fields syntax(公開類字段語法)]()，你能夠用類字典去正確的綁定回調：

class LoggingButton extends React.Component {
  // 這個預發確保 'this' 經過 handleClick 綁定。
  // 警告：這個是 *experimental(實驗性)* 語法。
  handleClick = () => {
    console.log('this is:', this);
  }
  
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

這個預發在 Create React App 默認啓用。

若是你不使用類字段語法，你能夠在回調中使用 [箭頭函數]()：

handleClick() {
    console.log('this is:', this);
  }

  render() {
    // 語法確保 'this' 經過綁定 handleClick 
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

問題在於這個語法 LoggingButton 每次渲染建立一個不一樣的回調。大多數情景，狀況還好。
然而，若是回調是將一個底層組件做爲 props 被傳遞。這些組件可能作額外的重渲染。一般咱們建議在構造器中使用類字段語法綁定來避免這類性能問題。

給事件處理者傳遞參數

循環內部一般想要傳遞額外的參數給一個事件處理者。例如，若是 id 是行 ID, 下面兩種均可以：

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

上面兩行是等效的， 分別使用 [箭頭函數]() 和 [Function.prototype.bind(函數原型鏈綁定)]()。

兩種場景呈現 React 事件的 e 參數都會做爲 ID 以後的第二餐宿傳遞。使用箭頭函數，必須顯式傳遞，使用 bind 任意多參數會自動指向。

[下一部分 條件渲染]()