为什么返回函数不会产生与直接调用代码相同的结果

Question

我有这个输入组件

<input 
  onBlur={invalidEmail ? 'Your email is invalid' : null}
/>

但如果我这样做

<input 
  onBlur={errorFunction}
/>

errorFunction = () => {
  return invalidEmail ? 'Your email is invalid' : null
}

忘了变量名，假设所有来自州等等

为什么第一个工作而第二个不工作？

Answer 1

onBlur需要回调，您正在调用errorFunction并根据条件使用返回值，但您可以使用method关键字访问render中的组件this。

  

onBlur = {this.errorFunction}

在您的案例中使用以下代码

  <input 
    onBlur={ this.errorFunction }
  />

  errorFunction = () => {
    return invalidEmail ? 'Your email is invalid' : null
  }

请查看here onBlur的示例代码，了解整个反应组件。

希望这会对你有所帮助!!

Answer 2

onBlur是通常由用户互动触发的事件。您必须向其传递一个函数，以便浏览器可以使用必要的参数调用该函数，您可以随意使用该函数

所以在下面的例子中，你实际上是将一个函数引用传递给onBlur，它将在触发事件时被调用。

<input 
 onBlur={ this.errorFunction }
/>

在下面的情况中，您将字符串（或null）传递给onBlur，并且没有任何内容可以调用。

<input 
 onBlur={invalidEmail ? 'Your email is invalid' : null}
/>