當使用匿名函數在JSX

匿名函數

<button onClick={() => this.functionNameHere()}></button>

和

調用像下面

<button onClick={this.functionNameHere()}></button>

而且當函數的區別使用其中任何一種（例如不同的場景來使用另一種場景）。

來源

2017-02-19 Kelvin

ES6，第一個場景「this」指的是被調用函數所屬的Component。 <button onClick={() => this.functionNameHere()}></button>相當於<button onClick={this.functionNameHere.bind(this)}></button>。

另一方面，在<button onClick={this.functionNameHere()}></button>「this」是指按鈕本身。

我來自Python，我仍然對javascript上下文感到困惑。查看此視頻以獲取更多信息：https://www.youtube.com/watch?v=SBwoFkRjZvE&index=4&list=PLoYCgNOIyGABI011EYc-avPOsk1YsMUe_

來源

2017-02-19 01:23:49

：

.then(function (response) { console.log(response.data); this.props.route.appState.tracks.concat(response.data); // 'this' isn't working }.bind(this))

例子被盜這個例子是指按鈕本身。當頁面重新呈現時，如何調用函數？不應該this.functionNameHere（）是未定義的，那麼因爲函數被定義爲類函數而不是按鈕函數？ – Kelvin

第一個示例正確綁定this的值（lambdas力爭在ES 2015中解決確切問題）。

() => this.functionNameHere()

後者使用的this的範圍的值可能不是你希望它是什麼。例如：

export default class Album extends React.Component { 

    constructor(props) { 
     super(props); 
    } 

    componentDidMount() { 
     console.log(this.props.route.appState.tracks); // `this` is working 
     axios({ 
      method: 'get', 
      url: '/api/album/' + this.props.params.id + '/' + 'tracks/', 
      headers: { 
       'Authorization': 'JWT ' + sessionStorage.getItem('token') 
      } 
     }).then(function (response) { 
      console.log(response.data); 
      this.props.route.appState.tracks.concat(response.data); // 'this' isn't working 
     }).catch(function (response) { 
      console.error(response); 
      //sweetAlert("Oops!", response.data, "error"); 
     }) 
    }

我們需要子在拉姆達這裏：

.then((response) => { 
     console.log(response.data); 
     this.props.route.appState.tracks.concat(response.data); // 'this' isn't working 
    })

或手動綁定：在第二，如果React this is undefined

來源

2017-02-19 01:25:05 djthoms

當使用匿名函數在JSX

回答

相關問題