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

【问题标题】：why does returning a function not produce same result as calling code directly为什么返回函数与直接调用代码产生的结果不同
【发布时间】：2018-08-03 19:24:34
【问题描述】：

我有这个输入组件

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

如果我这样做了

<input 
  onBlur={errorFunction}
/>

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

忘记变量名，假设所有变量都来自状态等

为什么第一个有效而第二个无效？

【问题讨论】：

why would the first one work and the second one not? 你确定吗？因为我认为第二个会起作用，而不是第一个。
你需要添加 this.errorFunction 代替 errorFunction
你检查过解决方案了吗？

标签： reactjs return ternary-operator

【解决方案1】：

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

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

<input 
 onBlur={ this.errorFunction }
/>

虽然在以下情况下，您将字符串（或 null）传递给 onBlur，但没有可调用的内容。

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

【讨论】：

【解决方案2】：

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

onBlur={ this.errorFunction }

在您的情况下使用以下代码，

  <input 
    onBlur={ this.errorFunction }
  />

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

请查看here onBlur 的示例代码以了解整个 React 组件。

希望对你有帮助！！

【讨论】：