React+TypeScript: 徳川歴代将軍名を覚える その4 チェックボックスバージョン

はじめに

checkboxはclickを認識しない、と思ってdivバージョン、buttonバージョンを作ってきたのですが、checkboxのlabelではclickを認識するだけでなく、onDoubleClickも使える!!!!

と言うことを発見して、それならばcheckboxが一番便利なはず、と元に戻って作りました。

実行例

See the Pen shogun-checkbox-double by kalz2q (@kalz2q) on CodePen.

説明

checkboxではform, input type="checkbox", label htmlForの3箇所のどこにどの属性を入れるか、key, id, classNameなど、よくわからない。わからなくでもやってみるとわかることもあるだろうと、試行錯誤しました。

結論: 基本的にformとか、inputとか上のレイヤーに付けるのではなく、中身につける。