以下是我正在处理的示例代码。
所以基本上有两个超链接,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>
)
}
}
最佳答案
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>
关于javascript - 在 onClick 事件上调用函数时使用绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35223470/