第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React Click事件處理最佳實踐

React Click事件處理最佳實踐

郎朗坤 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;還是這樣?要在渲染“部分”中聲明函數(shù)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個贊

我沒有看到你提到的第二種方式,并且不建議這樣做,因為它將為每個渲染創(chuàng)建一個新函數(shù)。


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


class Foo extends React.Component {

  constructor(props) {

    super(props);

    this.state = {};

  }


  handleClick = () => {

    //Do some stuff

  }


  render(){


    return(

      <div onClick={this.handleClick}>

        Foo

      </div>)

  }

}


export default Foo;

這樣,您不需要構造函數(shù)中的綁定,但該函數(shù)仍然只創(chuàng)建一次。


查看完整回答
反對 回復 2019-05-17
?
梵蒂岡之花

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

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

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

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

您經??吹降牡谌N方法涉及在構造函數(shù)中在構造時創(chuàng)建箭頭函數(shù):

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

或使用財產聲明:

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

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

除此之外,他們沒事。


查看完整回答
反對 回復 2019-05-17
  • 3 回答
  • 0 關注
  • 670 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號