はじめに
私は現在、Reactを使用して開発を行っています。今回は、onClickで複数の関数を実行したい場合にどのように実装すれば良いのか悩んだため、その解決方法を紹介します。
実装方法
今回、Chakra UIを使ってボタンを作成しており、onClickにonClickAddTodoとonOpenの2つの処理を追加したいと思っていました。（最終的には、この処理は不要になり、1つの関数にまとまりましたが、経緯を説明します。）
最初に書いていたコードは以下のようなものでした。onClickに対して関数を2つ渡せば動作するだろうと考えていたのですが、これではうまく動きませんでした。
<Button colorScheme="blue" onClick={onClickAddTodo,onOpen}>
登録
</Button>
そこで、下記のように修正しました。
<Button colorScheme="blue" onClick={() => { onOpen(); onClickAddTodo(); }}>
登録
</Button>
onClickで複数の関数を実行する場合、1つの関数にまとめて、その中で複数の関数を呼び出す必要があります。これにより、onClickで2つ以上の処理を実行できるようになります。
終わりに
結果的に、この処理は不要となりましたが、今後の開発でもこのようなケースに対応できるよう、引き続き頑張っていきたいと思います。