将额外的参数传递给ListItem onMouseOver处理程序

Question

我的React代码库中有一个material-ui ListItem，看起来像这样

   <ListItem button key={currIndex} onMouseOver={handleOnMouseClickOnListItem}>

我的处理程序看起来像这样（注意：我正在使用Flow输入）。

  const handleOnMouseClickOnListItem: Event => void = (event: Event) => {
  }

我希望能够将currIndex作为参数传递给我的handleOnMouseClickOnListItem与现有的event一起>

我尝试了以下操作，但无济于事，并且出现以下错误

无法将函数分配给handleOnMouseClickOnListItem，因为函数需要函数类型中的另一个参数

   <ListItem button key={currIndex} onMouseOver={handleOnMouseClickOnListItem(currIndex)}>
  const handleOnMouseClickOnListItem: Event => void = (event: Event, currIndex: number) => {
      console.log(currIndex);
  }

更新的非流程解决方案（基于下面接受的答案）

我在我的React代码库中有一个Material-ui ListItem，它看起来像这样我的处理程序看起来像这样（注：...

Answer 1

在处理程序中，您必须使用绑定或箭头函数将上下文绑定到事件。箭头功能对我来说更具可读性，但需要ES6。这是一个例子：