在onClick上調用函數時使用綁定事件

所以基本上有兩個超鏈接可以說，A和B.

我想，當你點擊一個，我想控制檯登錄「您選擇了A」，如果你選擇B，控制檯日誌「您選擇B」。

我很困惑，爲什麼我需要使用綁定傳遞參數？

在下面的代碼段，執行console.log發生當您單擊MIT而不是當你點擊斯坦福

「你點擊斯坦福大學是控制檯作爲我運行的程序並沒有什麼發生在單擊它儘快登錄之後。 '你點擊麻省理工學院'完美的作品另一方面。

import React, { Component, PropTypes } from 'react'; 

export default class ToppersView extends Component { 

    state = { 
     currentSelected : 'Harvard' 
    } 

    handleClick (str) { 

    console.log(" You selected ",str) 
    } 

    render() { 

     return (
     <div className = 'container'> 
      <h3> University is : {this.state.currentSelected}</h3> 
      <div> 
       {/* Works */} 
       <a onClick = {this.handleClick.bind(null,"MIT")}>#MIT</a> 

       {/*Does not work */} 
       <a onclick ={this.handleClick("Stanford")}>#Stanford</a> 

      </div> 
      <br/> 


     </div> 
     ) 
    } 

}

來源

2016-02-05 Sachin

一個返回一個函數，一個沒有返回。 onclick需要一個功能。 – dandavis

this.handleClick("Stanford")這裏調用的函數，而this.handleClick.bind(null,"MIT")結合上下文和參數，並返回功能，因此它可以被以後調用。

事件偵聽器需要對函數的引用，但您的方法不會返回任何內容，因此執行後沒有任何內容綁定到事件偵聽器。你可以修改方法返回另一個函數，它會在用戶點擊被稱爲：

handleClick (str) { 
    return function(){ // this function will be used as event callback 
    console.log(" You selected ",str) 
    } 
} 
// the function will be executed and the returned function called in event callback 
<a onclick ={this.handleClick("Stanford")}>#Stanford</a>

來源

2016-02-05 11:53:33 pawel

簡要和簡單的語言答案。 +1 – Sachin

有一個錯字，而遺漏.bind這裏：

<a onclick ={this.handleClick("Stanford")}>#Stanford</a>

這是正確的：

<a onClick ={this.handleClick.bind(null, "Stanford")}>#Stanford</a>

如果你不想使用.bind，你可以使用箭頭功能。因此，而不是：

handleClick (str) { 

    console.log(" You selected ",str) 
}

用途：

handleClick = (str) => { 

    console.log(" You selected ",str) 
}

來源

2016-02-05 19:18:47 KadoBOT

在onClick上調用函數時使用綁定事件

回答

相關問題