Question

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

所以基本上有两个超链接可以说是A和B.

我想当你点击A，我想控制日志'你选择了A'，如果你选择B，控制台日志'你选择了B'。

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

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

'你点击斯坦福'是我在运行程序时记录的控制台，之后点击它没有任何反应。另一方面，'你点击麻省理工学院'完美无缺。

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")绑定上下文和参数并返回函数，以便稍后调用它。

事件监听器需要对函数的引用，但是您的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>

Answer 2

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

Answer 3

您正在做的事情onclick = {this.handleClick("Stanford")}会立即调用该方法并返回undefined。您要做的是传递函数的引用，而不是调用函数。此外，bind确实提供了您的函数的引用，但它确实（并且意味着）提供了更多的参考。您可以只引用没有()的函数。参见＃2。
您没有在做什么（但也许其他来这里的人正在做或为那些好奇的人做），但这也不是一个好主意onClick ={this.handleClick}，因为您将无法在事件处理程序内部访问this。尽管通过这种方式，它现在确实设置了一个事件处理函数。但是，当该函数运行时，对this的任何引用都将为空（例如：就像在reactjs中一样，您将无法执行类似this.setState({...});的有用操作尽管，您的代码现在将可以使用，因此无需bind即可使用。
您需要做什么（可能），为什么要this.handleClick.bind(this)（因为how this binding works in Javscript），并且将硬字符串放入回调函数也没有太大价值。如果您要引用它，请像这样e.target.innerText动态地进行操作，请参见codepen，以获取完整的示例：https://codepen.io/Zombies333/pen/yLLrLyx

在onClick事件上调用函数时使用bind

3 个答案: