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

Question

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

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

我的处理程序看起来像这样（注意：我使用的是 Flow 类型）。

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

我希望能够将 currIndex 作为参数传递给我的 handleOnMouseClickOnListItem 除了现有的 event

我尝试了以下但无济于事，我收到以下错误

无法将函数分配给 handleOnMouseClickOnListItem，因为函数 requires 是函数类型

的另一个参数

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

  const handleOnMouseClickOnListItem: Event => void = (event: Event, currIndex: number) => {
      console.log(currIndex);
  }

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

Answer 1

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

onMouseOver={(e) => handleOnMouseClickOnListItem(e, currIndex)}

您还必须在参数的类型签名中添加新参数的类型。

const handleOnMouseClickOnListItem: (Event, number) => void = (event: Event, currIndex: number) => {
          console.log(currIndex);
      }

Passing an extra parameter to ListItem onMouseOver handler