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

我的React代码库中有一个物料ui

ListItem

，如下所示

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

我希望能够将

currendex

作为参数传递给我的

handleOnMouseClickOnListItem

与现有的

事件一起

我尝试了以下操作，但没有成功，我得到了以下错误

无法将函数分配给

handleOnMouseClickOnListItem

，因为函数需要函数类型中的另一个参数

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

---

更新-非流动解决方案（基于以下公认答案）

---

在处理程序中，必须使用绑定或箭头函数将上下文绑定到事件。箭头函数更易于阅读，但需要ES6。下面是一个例子：

onMouseOver={（e）=>handleOnMouseClickOnListItem（e，currendex）}

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

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

---

啊，看起来您还需要在处理程序上使用绑定或箭头函数，如下所示：

onMouseOver={（e）=>handleOnMouseClickOnListItem（e，currendex）

啊，是的，就是这样。我制作了一个简化的CodeSandbox，您的答案在这里工作-

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

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