Question

我对onClick：

上发生的这种行为感到非常恼火

如果我有：

<button onClick={ this.myFunc(myVal) }></button>

只要按下单击按钮，组件就会立即触发，因此我需要执行以下操作才能修复它：

<button onClick={ () => this.myFunc(myVal) }></button>

但我相信这不是实现这个目标的正确方法吗？如果我想将this.myFunc(myVal)实际传递给另一个组件，该怎么办？它不会起作用。

Answer 1

当你说

时

<button onClick={ this.myFunc(myVal) }></button>

您告诉React您希望将执行this.myFunc(myVal)的返回值分配给onClick处理程序。相反，您可能希望将参数设置为默认值的函数赋予它：

<button onClick={ this.myFunc.bind(this, myVal) }></button>

这将myVal绑定为this.myFunc的第一个参数，并确保上下文也正确绑定。请记住，这会导致event参数作为第二个参数传递给函数。

Answer 2

你正在调用函数，如下所示，这就是为什么你的方法在挂载后立即被调用

<button onClick={ this.myFunc(myVal) }></button>

你必须只分配如下的功能

<button onClick={ this.myFunc }></button>

如果要将变量传递给该方法，请将该变量添加到状态并从其中访问

Answer 3

onClick属性需要函数作为参数。这就是为什么第二个设置是正确的，第一个设置不正确（除非myFunc返回一个函数）..

以下是功能：

(event) => myFunc(myVal, event)        // anonymous function, which calls myFunc IF executed
myFunc.bind(this, myVal)   // myFunc without parentheses, with parameters - including event - bound

以下不是功能

myFunc(myVal)              // == THE RESULT of the function, so == whatever myFunc returns

在一个例子中：

// myFunc is a function that calls another function
// returns length of whatever is passed in
myFunc(val) {
  otherFunc()
  return (val.length)
}
// here: myFunc is defined, but it has never executed: otherFunc was not called

let myVal = [1,2]

let callback = () => myFunc(myVal)
// here myFunc is still NOT called, neither is otherFunc
// callback is now defined as a (anonymous) function, which, whenever called
// will execute the function myFunc, by passing in the value of myVal

let a = myFunc(myVal)
// here: myFunc WILL be called, so also otherFunc
// at this point a == 2 (the length of the array myVal)

let b = callback()
// here, callback function is executed, and so also myFunc
// at this point b == 2

停止在mount上执行的onClick函数，而不使用（）=＆gt;函数（someVal）

3 个答案: