javascript - 在 onClick 事件上调用函数时使用绑定(bind)

Question

以下是我正在处理的示例代码。

所以基本上有两个超链接，A 和 B。

我想当您单击 A 时，我想控制台日志“您选择了 A”，如果您选择 B，控制台日志“您选择了 B”。

我很困惑为什么我需要使用 bind 传递参数？

在下面的代码片段中，console.log 在您单击 MIT 时出现，但在您单击 Stanford 时不会出现

“您单击了 Stanford”在我运行该程序后立即记录在控制台中，之后单击它没有任何反应。另一方面，'You Clicked 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>
        )
    }

}

Answer 1

this.handleClick("Stanford") 在这里调用函数，而 this.handleClick.bind(null,"MIT") 绑定(bind)上下文和参数，返回函数以便稍后调用。

事件监听器需要对函数的引用，但您的 handleClick 方法不返回任何内容，因此在执行后没有任何内容可以绑定(bind)到事件监听器。您可以修改 handleClick 方法以返回将在点击时调用的另一个函数:

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>