Передача дополнительного параметра в обработчик ListItem onMouseOver

Question

У меня есть материал-пользовательский интерфейс ListItem в базе кода React, который выглядит следующим образом

   <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);
  }

---

Обновлено -Non-flow Решение (на основе принятого ответа ниже)

Answer 1

В обработчике вам придется либо использовать привязку, либо функцию стрелки, чтобы связать ваш контекст с событием. Функция стрелка, как правило, более читабельна, но требует ES6. Вот пример:

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

Вы также должны добавить тип для нового параметра в сигнатуру типа параметров.

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