在 mapDispatchToProps 中传递事件对象和参数答案

【问题标题】：Passing event object along with param in mapDispatchToProps在 mapDispatchToProps 中传递事件对象和参数
【发布时间】：2018-03-27 16:37:49
【问题描述】：

我希望能够访问 mapDispatchToProps 中的事件对象以及发送参数。你是怎么做的？

这是我目前所拥有的：

const mapDispatchToProps = dispatch => ({
  onRowClick: (id, event) => {
     console.log(id, event)
  },
})

在我看来：

<TR key={`${index}`} onClick={() => onRowClick(id, event)}>

但是，这是不正确的。如何分派事件、传递参数以及访问事件对象？

【问题讨论】：

标签： javascript reactjs ecmascript-6 redux react-redux

【解决方案1】：

让我告诉你why you shouldn't do it:：

SyntheticEvent 是池化的。这意味着 SyntheticEvent 对象将被重用，并且所有属性都将在事件回调已被调用。这是出于性能原因。作为因此，您不能以异步方式访问事件。

但是，如果您需要，您可以这样做：

const mapDispatchToProps = dispatch => ({
  onRowClick: (id, event) => {
     console.log(id, event)
  },
})

<TR key={`${index}`} onClick={(event) => {
  event.persist(); // remove the synthetic event from the pool
  onRowClick(id, event);
}}>

【讨论】：

【解决方案2】：

你必须做onClick={() => this.props.onRowClick(id, event)}

mapDispatchToProps 所做的，顾名思义，就是将 dispatch 函数映射到 props

阅读this了解更多关于connect和mapDispatchToProps的信息

【讨论】：

【解决方案3】：

您需要将此事件对象从 onClick 处理程序传递给您的 onRowClick 函数。像这样：

onClick={event => this.props.onRowClick(id, event)}

【讨论】：

【解决方案4】：

需要在箭头函数中指定事件参数：

onClick={(event) => onRowClick(id, event)}>

另外，你不应该在渲染函数中使用箭头函数

【讨论】：