• QQ咨詢:4001806960
  • 咨詢熱線:400-180-6960

React從入門到精通系列之(6)事件處理

作者:日期:2017-02-19 13:15:36 點擊:389

 

 

五、事件處理

使用React元素處理事件與處理DOM元素上的事件非常相似。不過有一些語法上的差異:

  •  

  • React事件使用駝峰命名法,而不是全部小寫命名。

  •  

  • 使用JSX你傳遞一個函數作爲事件處理程序,而不是一個字符串。

例如,HTML:

    Active Lasers

在React中略有不同:

    Active Lasers

另一個區別是,你不能返回false來防止React中的默認行爲。 您必須顯式調用preventDefault。 例如,使用純HTML,爲了防止打開新頁面的默認鏈接行爲,您可以寫:

    Click me

在React中,這可以改爲:

function ActiveLink() {
    function handleClick(e) {
        e.preventDefault();
        console.log('The link was clicked');
    }
    return (
                    click me
            );
}

這裏,e是合成過的event。 React根據W3C規範定義這些event,因此你不需要擔心浏覽器兼容性的問題。

當使用React時,在創建後向DOM元素添加通常不需要調用addEventListener監聽器。 相反,只是在最初渲染元素時提供事件監聽器。

當您使用ES6類定義組件時,常見的模式是將事件處理程序作爲類上的公共方法。 例如,此Toggle組件呈現一個按鈕,讓用戶在“ON”“OFF”狀態之間切換:

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};    // 這個綁定是必要的,要不然該事件中的this就會是當前實例
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }
  render() {
    return (
              {this.state.isToggleOn ? 'ON' : 'OFF'}
          );
  }
}
ReactDOM.render(  ,
  document.getElementById('root')
);

你必須十分注意JSX中事件函數的意義。 在JavaScript中,類中的方法默認不綁定this。 如果你忘記綁定this.handleClick中的this關鍵字並將它傳遞給了onClick事件,當函數實際被調用時,會報出undefined的錯誤。

這不是React中特定的行爲; 它是JavaScript中函數正常工作的一部分。
一般來說,如果你引用一個方法是後面沒有(),如onClick = {this.handleClick},就會綁定該方法。

如果調用bind會使你煩惱,有兩種方法可以解決這個問題。 您可以使用屬性初始值設定props來正確處理:

class LoggingButton extends React.Component {  // 使用剪頭函數綁定this
  handleClick = () => {
    console.log('this is:', this);
  }
  render() {
    return (
              Click me
          );
  }
}

默認情況下,在Create React App中啓用此語法。

如果不使用屬性初始化語法,可以在回調中使用箭頭函數:

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }
  render() {
    // 給事件傳入一個剪頭函數也可以綁定this
    return (
       this.handleClick(e)}>
        Click me
          );
  }
}

此語法的問題是,每次LoggingButton渲染時都會創建不同的回調函數。 在大多數情況下,這是要被罰款的。 然而,如果這個回調作爲一個prop傳遞給較低的組件,這些組件可能會做額外的重新渲染。 我們一般建議在構造函數中綁定以避免這種性能問題。

 

上一篇: React從入門到精通系列之(5)state管理和生命周期鈎子

下一篇: MongoDB基本命令語句