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とか上のレイヤーに付けるのではなく、中身につける。
クリック数を数えるロジックはdivにしか使えませんが、このロジックならダブルクリック以上のトリプルクリック、クアドルプルクリックとかも拾えるのではないかとやってみました。
遊んでみて下さい。
See the Pen double-triple-quadruple-click by kalz2q (@kalz2q) on CodePen.
setTimeoutで指定した時間以内にclickcountをいくつまで上げたかで分岐しています。
setTimeoutは500を指定したので、0.5秒以内だと思う。
使い道としては3次元、4次元のテーブルの要素選択に使えるのではないかと思います。
クリック数を数えるロジックはdivにしか使えない、と言うのは、checkboxはclickを受け付けないし、buttonはonClick, onDoubleClickしかないからなのですが、今検索したらonClickはevent.detailでclick数を取得出来るみたい。やってみよう。=> やってみたところ、event.detailでクリック数は取れるのだが、1,2,3,4,... と全て取れてしまってsetTimeoutで制御も出来なかった。
htmlのbuttonにはダブルクリックを認識する機能があって、ReactではonDoubleClickで取得できます。
今回それを使ってみました。出来上がりの形、機能は前回 div バージョンと全く同じですが、心なしか動きが良いような気がします。
ダブルクリックした時の取りこぼしがない。
See the Pen shogun-button-double by kalz2q (@kalz2q) on CodePen.
div バージョンでやりたいことが出来ていたので button バージョンを作らないつもりだったのですが、作って良かった。
onDoubleClick を使うことにより場合分けが単純になり、プログラムが見やすく、わかりやすくなった。
はじめに、にも書いたけど取りこぼしがなくなって、気持ちよく使える。
教訓: React, javascript で何もかもやろうとせず、html で出来ることは積極的に使った方がトータルとして効率が良い。勉強になりました。
// アイデア コメントの形でプログラミング要件を書く
// コメントの形で要件を作業に落とし込む
// 例 greeting
// 名前の入力欄
// onChangeを実装する
// enter or submit で
// hello + name を出力
// reset で初期状態 => autofocus が戻らない!!!!
See the Pen Untitled by kalz2q (@kalz2q) on CodePen.
formにresetと言う機能があって、onResetで取り出せる。初期状態に戻してautofocusも戻すことが出来るかと探したのですが、なかったのでプログラムで個別にhookで入力値や出力値を消しています。
文字列の中に変数を入れる方法がわからなかった。文字列の中にスペースを入れる方法がわからなかった。要研究。
onFocusと言うのがあったのでサンプルを作ったのですが、onClickとかonChangeとかがあるのでonFocusの使い道が思いつかない。
input欄をクリックすると「フォーカスされました」に変わります。
See the Pen Untitled by kalz2q (@kalz2q) on CodePen.
インプット欄が2つあるのでidで区別しました。idはe.target.idで取得出来ました。
if else は単純な時は波括弧が省略できるのを発見した。
placeholderとvalueは共存出来るか。やってみよう。
onFocus, onClick, onChangeのどれが優先されるか。やってみよう。
元記事 サバイバルTypeScript
にあったいいねボタン, 英語で like button と言うらしい、を codepen に載せてみました。
See the Pen likeButton by kalz2q (@kalz2q) on CodePen.
最近の自分のスタイルでは component を使わずに view 部分は App の return の中にすべて書いてしまいます。すると component の書き方を忘れてしまうので一番単純形での例になるのではないか。
codepen問題集と言うアイデアがあって、プログラムの結果を見てプログラムをスクラッチから書くと言うアイデアです。今までのReact+TypeScript記事はすべてそれに使える。
解き方を指定しないで結果をみてプログラムを書くわけだからhtmlだけでとか、pure javascriptで書くとか考えられる。
React+TypeScriptで書くのが一番生産性が高いと思うのでまた今度理由を整理してみたい。
徳川将軍を覚える暗記カードのバージョン2です。
ダブルクリックで覚えたカードを削除する仕組みを実装しました!!!!
See the Pen shogun-div by kalz2q (@kalz2q) on CodePen.
材料はいろいろあったのですが、組み合わせて動くようにしました。
reactで何かを並べてクリックに対応させる時mapとcheckboxを使うと綺麗に掛けます。
ところが!!!!
checkboxはクリックを拾ってくれない。クリックに相当するのがcheckboxのcheckなのでそういう仕様みたいです。これをdivにする必要がありました。
