React+TypeScript: clickでclassをadd,removeしてanimate

はじめに

前回の記事ではclickでisActiveをtoggleしてその結果をif分でclassを書き換えていました。

それでも良いのですが、あるべき形としてはclickの結果classをつけたり外したりをするのが良いと思います。ネットの記事を参考に出来たみたいなので載せます。

実行例

See the Pen sandbox by kalz2q (@kalz2q) on CodePen.

解説

hookはuseStateだけ。これは前回と同じです。add, removeは次のような形で使っています。

if (isActive) { event.currentTarget.classList.add('bg-salmon'); }
else { event.currentTarget.classList.remove('bg-salmon'); };