2023-01-13

React+TypeScript: divでcheckboxを実装

CodePen React TypeScript

はじめに

暗記カードをシングルクリック onClick でチェック、ダブルクリックonDoubleClickで削除したい。

と思ったのですが、onDoubleClickはボタンでしか使えない。

checkboxにonClickを使ってonDoubleClickを実装しようとしたらcheckboxはonClickを受け付けない。

そもそもReactでcheckboxやbuttonを使うのは邪道なのかもしれない。divで全部実装しようと思いついて、単純な例でやってみました。

実行例

See the Pen checkbox-div-version by kalz2q (@kalz2q) on CodePen.

説明

mapを使うのでdivにkeyを付けたのだけどonClickでkeyが取得できない。keyと同じ値をidに入れたら取得できました。

clickCountにカウントを入れて、setTimeoutで決めた時間以内にサイドクリックするとダブルクリックと見做すと言うロジックなのでダブルクリックと認識されない場合が生じる。再度トライすればいいだけなので特に問題はない。

buttonにはonDoubleClickと言う便利なメソッドがあるので、これと同じことをシンプルな形で出来るみたい。buttonで実装すればダブルクリックの判定と、プログラム自体が綺麗になるだろう。しかし、buttonによる制限があると思うのでやってみないとわからない。

Reactのプログラムを見るとcheckboxは皆さん多用している。便利だものね。buttonは多くの場合divで作っている様に見える。

2023-01-11

React+TypeScript: ダブルクリックその2

CodePen React TypeScript

はじめに

Reactでダブルクリックを拾うのの別バージョンです。

前のバージョンのがプログラムの中で使おうとしてうまく動かなかったのでこれで再度試してみようと思います。

実行例

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

説明

前のはcouterとsetTimeoutを使って区別していたけれど、今回のはuseRefを使って管理している。

2023-01-10

React+TypeScript: checkboxとlabel for

CodePen React TypeScript

はじめに

作りかけです。

checkboxを利用した大きなボタンを作るためにhtmlでlabel forと言うのを使うのを、Reactでどうやるか研究中。

実行例

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

説明

label for => label htmlfor とします。大きなボタンにするにはさらにdivで囲んでclassNameを付けて形を整えます。

2023-01-10

React+TypeScript: checkboxをmapする

CodePen React TypeScript

はじめに

Reactでmapの中にcheckboxを入れた時の用例を探してあったのをローカルとcodepenで動く様になりました。

実行例

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

説明

元記事 Reactでフォームを扱う方法についてまとめました【React/Input/Radio/Select】

この例ではkeyを指定せずにmapの中にcheckboxを置いていて、checkの管理はhandleChangeの中でやっている。keyを指定する方法は私の徳川歴代将軍名の記事で紹介しているやり方で出来るがあのやり方はデータのidと勘違いしていて混乱している。

mapの中にlistを置けばkeyを指定出来るのでそのやり方も試してみたい。

元記事を移植するに当たりオブジェクト配列の型を指定する必要があった。

type の使い方
type Item = { id: number; ... } // セパレーターはセミコロン型は大文字始まりにする
const [items, setItems] = useState<Item>( data ) // 型定義は <Item> である。<[Item]> ではない
const data = [ { "id": 1, ... // セパレータはカンマ key は string で大丈夫