Реакция: обработчик / обратный вызов onBlur не работает должным образом - Вызывается функция и функция в качестве ссылки одновременно

Question

Пример: https://codesandbox.io/s/broken-microservice-tyobc

Итак, у меня есть компонент реакции ввода текста с onBlur. Он содержит функцию handleBlur и функцию onBlurCallback, которые передаются внутрь.

Они работают так, как я ожидаю, что они будут индивидуально

const MyInput = ({ onBlurCallback }) => { ... }

<input onBlur={e => handleBlur(e} />
<input onBlur={onBlurCallback} />

Но когда я пытаюсь их объединить, вот где я сталкиваюсь с проблемами ... Мой обратный вызов срабатывает, как я и ожидал, но мой handleBlur не срабатывает вообще.

<MyInput onBlur={
    (e => {
        handleBlur(e);
    },
    onBlurCallback)
} />

Чувствую, что я упускаю что-то супер очевидное ... Любая помощь будет отличной!

Answer 1

<input
  onBlur={e => {
    handleBlur(e);
    onBlurCallback(e);
  }}
/>

Это вызвало бы как обратный вызов, так и обработчик.

Рабочая демонстрация - https://codesandbox.io/s/zealous-wing-xo1ip

Answer 2

Это должно работать, если вы делаете это следующим образом

const MyInput = ({handleBlur, onBlurCallback}) => {
  return (
    <input onBlur={e => {
      handleBlur(e);
      onBlurCallback();
    }} />
  )
} 

<MyInput handleBlur={blurHandler} onBlurCallback={blurCallback} />

В противном случае вы должны предоставить лучший пример кода с точным определением MyInput и тем, как вы его используете.