在onClick事件调用函数时使用bind的作用

Question

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

基本上有两个超链接，假设为A和B。

当你点击A时，我想要在控制台记录“你选择了A”，如果你选择B，则控制台记录“你选择了B”。

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

在下面的片段中，当你点击MIT时，console.log会出现，但是当你点击Stanford时却没有出现。

“你点击了Stanford”在我运行程序时就已经被记录了，之后点击它什么也不会发生。另一方面，“你点击了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>
        )
    }

}

- Sachin

---

一个返回函数，一个不返回任何东西。onclick需要一个函数。 - dandavis

Answer 1

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

事件监听器需要对函数的引用，但是您的 handleClick 方法没有返回任何内容，因此在执行完之后就没有任何东西可以绑定到事件监听器。您可以修改 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>

- pawel

Answer 2

1. 你所做的 onclick = {this.handleClick("Stanford")} 只是立即调用该方法并返回 undefined。你需要传递函数的引用而不是调用该函数。同时，bind 提供了一个函数的引用，但它实际上用于更多的情况。你可以在函数名称中省略括号 ()。参见＃2。

2. 虽然这种方式能够设置事件处理程序函数，但却不是明智之举 onClick ={this.handleClick}，因为一旦进入事件处理程序，你将无法访问this。尽管这么做现在设置了一个事件处理函数，但是当该函数运行时，任何对this的引用都将为空（例如：作为reactjs中的代码，您将无法执行诸如this.setState({...});之类有用的操作。尽管您的代码现在可以工作，但没有必要使用bind来使其工作。

3. 你（可能）需要做的事情和原因是 this.handleClick.bind(this)，因为JavaScript中此绑定的工作方式，还有在回调函数中放置硬字符串没有什么价值。如果你想引用它，请像这样动态地执行e.target.innerText，请参见Codepen的完整重新编排示例：https://codepen.io/Zombies333/pen/yLLrLyx

- Zombies

Answer 3

这里有一个错别字和一个缺少 .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)
 }

- KadoBOT