何时在函数名称调用 (es6) 后使用括号

Question

我想知道为什么某些函数调用没有括号？你怎么知道什么时候不应该在函数名称后使用括号？请参阅下面的示例。为什么第三行不起作用？

onClick={this.validate} // why does function work here without parentheses?
onKeyPress={e => e.key === 'Enter' && this.validate()} // works
onKeyPress={e => e.key === 'Enter' && this.validate} // doesn't work

Answer 1

onClick

是一个接受函数的属性 - 在后台，React，在接收<some-element onClick={someFunction}/>时，保存someFunction供以后使用(请注意，它不调用函数)，然后在用户单击时调用函数。请注意，您可以将其重写为<some-element onClick={(...args) => someFunction(...args)}/>，如果这对您来说更有意义。

现在，当用户按下存在onKeyPress={e => e.key === 'Enter' && this.validate()}的元素时会发生什么：

函数

1. e => e.key === 'Enter' && this.validate()称为
2. 评估e.key === 'Enter' && this.validate()
3. 评估e.key === 'Enter'。如果它的计算结果为true，则：
4. this.validate()被调用并计算为布尔值

请注意它与编写onKeyPress={e => e.key === 'Enter' && this.validate}时有何不同：

函数

1. e => e.key === 'Enter' && this.validate称为
2. 评估e.key === 'Enter' && this.validate
3. 评估e.key === 'Enter'。如果它的计算结果为true，则：
4. this.validate被评估为布尔值。如果函数存在，则将其强制进入布尔true，否则this.validate计算结果为undefined，后者被强制放入布尔false。请注意this.validate是如何没有被调用的。我认为这是一个错误，除非您明确希望这种行为发生。