区分参数和反应事件

时间:2015-03-03 15:24:14

标签: javascript reactjs

两个处理程序(在Reactjs应用程序的不同部分中)调用相同的函数。

一个地方:

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

其他地方:

<a onClick={Foo.bar}>

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

有没有一种很好的方法来处理这个问题,如果它是通过参数或只是一个React事件在bar中知道的?无需在任何地方将null作为参数绑定使用该函数。这似乎不是一个非常好的解决方案,因为稍后更改参数的数量将需要使用该函数检查所有位置。

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

2 个答案:

答案 0 :(得分:1)

我可能有两个独立的功能:

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

<a onClick={Foo.barClick}>

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

答案 1 :(得分:0)

如果您使用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' })}>