Реагирование: Функциональные компоненты, передача и выполнение функций слушателям событий

Question

У меня есть функциональный компонент React, в котором я хочу вызвать функцию при нажатии на иконку IonicIcon.Теперь существует два разных метода выполнения этой функции: я могу просто передать ссылку на свой метод в скобках {} или передать функцию, но я не понимаю, почему и как это работает за кулисами,а какой из них лучше, метод 1 или метод 2?

const checkIcon = () => {
    let showIcon = null;
    if (actualState.showInputField === false) {
        showIcon = (
           <IoIosAddCircleOutline onClick = {() => {
               toggleInput();
            } 
        }
            />
        )
    } else {
        showIcon = (
            <IoIosRemoveCircleOutline onClick = {toggleInput}
            />
        )
    }
    return showIcon;
}


const toggleInput = () => {
    changeState({...actualState, showInputField: !actualState.showInputField});
}

Answer 1

Вариант 1 onClick={() => toggleInput()} лучше всего использовать, если вы хотите перенаправить в свою функцию что-то еще, кроме объекта event.

<div onClick={(event) => doSomething(event, index, extra_data)} />

Вариант 2 onClick={toggleInput} - это стандартное использование обработчиков событий.Он просто получит объект event в качестве первого аргумента.