同时使用 'onClick' 和 'onDoubleClick' 事件监听器反应组件

【问题标题】：React component with 'onClick' and 'onDoubleClick' event listener at same time同时使用 'onClick' 和 'onDoubleClick' 事件监听器反应组件
【发布时间】：2020-01-10 10:17:24
【问题描述】：

嗯，我在 REACT JS 中有一个反应组件，非常适合重用。但它目前正在使用“onDoubleClick”事件监听器。我想用一个简单的'onClick'事件监听器重用它（没有我克隆这个comp）。应该调用哪个事件侦听器取决于组件在应用程序中的位置。更准确地说，事件监听器的选择取决于组件的父级。

任何想法，我该怎么做？ ...或者我必须克隆原始组合？ :)

提前感谢您的帮助

【问题讨论】：

标签： javascript reactjs event-handling event-listener

【解决方案1】：

我猜通过将两者都添加到您的可重用组件中（我没有，目前无法测试），但是，我根据我使用onPress 和onLongPress 的类似经验进行回复，帖子是here:

const { onClick, onDoubleClick } = this.props;

<YourResuableComponent 
  onClick={onClick? onClick : () => {}} 
  onDoubleClick={onDoubleClick? onDoubleClick : () => {}} 
/>

说你有

handleClick = () => {
  console.log('click')
}

你只需像这样调用你的组件：

<YourResuableComponent onClick={this.handleClick} />

但是，如果它不起作用，我想您可能想阅读this

【讨论】：

效果很好，非常感谢您的及时回答和您的大力帮助。附加信息：在我的情况下，甚至三元运算符都不是必需的。