首頁猿問 React Click事件處理最佳實踐

React Click事件處理最佳實踐

JavaScript

郎朗坤 2019-04-25 22:19:49

學習React時，我看到人們處理事件的方式不同。處理點擊事件的最佳做法是什么？這樣好嗎？將事件添加到要調用的類對象中？import React from "react";class Foo extends React.Component { constructor(props) { super(props); this.state = {}; handleClick = handleClick.bind(this) } handleClick(){ //Do some stuff } render(){ return( <div onClick={this.handleClick}> Foo </div>) }}export default Foo;還是這樣？要在渲染“部分”中聲明函數import React from "react";class Bar extends React.Component { constructor(props) { super(props); this.state = {}; } render(){ const handleClick = () => { //Do some stuff } return( <div onClick={handleClick}> Bar </div>) }}export default Bar;有沒有更好的辦法？哪種編碼模式最好？

查看完整描述

3 回答

人到中年有點甜

TA貢獻1895條經驗獲得超7個贊

官方文件反應使用：

...
    handleClick = handleClick.bind(this)...

但我認為，使用以下內容也更好：從“反應”中導入React;

class Bar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  handleClick = () => {
    //Do some stuff
  }
  render(){
    return(
      <div onClick={this.handleClick}>
        Bar
      </div>)
  }}export default Bar;

使用第二種方法，您不必關心使用.bind()。

反對回復 2019-05-17

德瑪西亞99

TA貢獻1770條經驗獲得超3個贊

我沒有看到你提到的第二種方式，并且不建議這樣做，因為它將為每個渲染創建一個新函數。

我這樣做的方式是這樣的：

class Foo extends React.Component {

constructor(props) {

super(props);

this.state = {};

}

handleClick = () => {

//Do some stuff

}

render(){

return(

Foo

</div>)

}

export default Foo;

這樣，您不需要構造函數中的綁定，但該函數仍然只創建一次。

反對回復 2019-05-17

梵蒂岡之花

TA貢獻1900條經驗獲得超5個贊

你的第一種方法，使用你在構造函數中綁定的原型函數，除了你缺少的東西之外是好的this：

this.handleClick = this.handleClick.bind(this);

你的第二種方法是在每個渲染中創建一個新函數render。這使得handleClick為測試目的而難以模擬。

您經?？吹降牡谌N方法涉及在構造函數中在構造時創建箭頭函數：

this.handleClick = event => {
    // ...};

或使用財產聲明：

class Bar extends React.Component {
    handleClick = event => {
        // ...
    };}

這些都具有相同的模擬/可測試性問題。

除此之外，他們沒事。

反對回復 2019-05-17

3 回答
0 關注
675 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

React Click事件處理最佳實踐

React Click事件處理最佳實踐

3 回答

添加回答