Как передать две функции по одному onClick()?

Question

[NooBick]

<PanelHeaderButton onClick={this.props.go} data-to='Home'><Icon28ChevronLeftOutline/></PanelHeaderButton>

Код сверху работает отлично, он переходит назад, на вкладку Home. Но мне надо сделать, чтобы в onClick было две функции. Главное чтобы this.props.go получал data-to.

Так выглядит go

const [activePanel, setActivePanel] = useState('Home');

	const go = e => {
		setActivePanel(e.currentTarget.dataset.to);
	};

Comments

[Алексей Абрамов]

https://ru.reactjs.org/docs/handling-events.html

Answer 1

[Владимир Проскурин]

Обычно определяется хендлер события, и в нем вызываются нужные функции

const handleClick = useCallback((ev) => { // меморизирую, т.к. обработчик передается в компонент а не HTML элемент
    props.go(ev); // более правильно конечно передавать не объект события, а конкретное значение. Функция go не должна ничего знать про событие
    // тут вызов второй функции
}, []);

Comments

[NooBick]

Что мне с этим делать, если не секрет? А точнее куда вставлять?

[Aetae]

NooBick, ты знаешь куда. Так или иначе.

[Владимир Проскурин]

NooBick, моей карме будет большой минус, если я просто скажу, куда это вставить. Вам лучше попытаться самим разобраться. Вот прекрасная дока https://ru.reactjs.org/docs/handling-events.html там сразу дается пример с событием onSubmit, тут аналогично. Но немного странно, что в первом блоке кода у вас this.props.go (а значит это класс), а во втором useState (а значит это хуки). Лучше стараться писать компоненты только либо на классах, либо на хуках (лучше на хуках, хуки теперь в основном развиваются в реакте).