区分参数和反应事件

Question

两个处理程序（在 Reactjs 应用程序的不同部分）调用同一个函数。

一处：

Foo.bar({key: 'value'});

其他地方：

<a onClick={Foo.bar}>

在最后一种情况下，除非我将其更改为 Foo.bar.bind(null, null)，否则 bar 函数的第一个参数将是 React 事件对象。

有没有一个好的方法来处理这个问题，在 bar 中知道它是传递了一个参数还是只是一个 React 事件？无需在使用该函数的任何地方绑定 null 作为参数。这似乎不是一个很好的解决方案，因为稍后更改参数的数量将需要使用该函数检查所有位置。

检查以这种方式调用的所有函数中的 React 事件对象的某些键，以确保传递的是一个参数而不是 React 事件，这也感觉没有必要。

Answer 1

我可能会有两个独立的功能：

Foo.bar({key: 'value'});

和

<a onClick={Foo.barClick}>

其中 barClick 调用 Foo.bar(null) 或类似的。

Answer 2

如果您使用 ES6 箭头函数支持从 jsx 编译代码，您可以使用下一个变体：

<a onClick={() => Foo.bar({ key: 'value' })}>

或者如果您需要事件对象：

<a onClick={event => Foo.bar({ key: event.prop })}>

你可以只使用匿名函数，但看起来更糟：

<a onClick={function() { Foo.bar({ key: 'value' }) }}>

如果没有箭头函数、匿名函数或创建新函数，您只能通过使用 bind 方法（正如您在问题中指定的那样）来实现：

<a onClick={Foo.bar.bind(Foo, { key: 'value' })}>

Distinguish between arguments and react events