はじめに Reactでダブルクリックを拾うのの別バージョンです。 前のバージョンのがプログラムの中で使おうとしてうまく動かなかったのでこれで再度試してみようと思います。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. 説明 前のはcouter…

はじめに 作りかけです。 checkboxを利用した大きなボタンを作るためにhtmlでlabel forと言うのを使うのを、Reactでどうやるか研究中。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. 説明 label for => label htmlfor とします。大きなボタ…

はじめに Reactでmapの中にcheckboxを入れた時の用例を探してあったのをローカルとcodepenで動く様になりました。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. 説明 元記事 Reactでフォームを扱う方法についてまとめました【React/Input/R…

はじめに 配列を弄って表示が変わることの確認です。 実行例 See the Pen slice-array-example by kalz2q (@kalz2q) on CodePen. 説明 javascriptはimmutableでないので、一旦別の変数に入れて弄ってからhookで元の配列に戻せば表示に反映される。

はじめに ダブルクリックをReactでどうやるか。 実行例 See the Pen double-click-demo by kalz2q (@kalz2q) on CodePen. 説明 onDoubleClickと言うイベントはあってダブルクリックしか使わないのならば便利なようなのですが、シングルクリックと両方使うと…

はじめに まだ作りかけです。 江戸時代の時代劇を見るのに八代目将軍吉宗、とか言いますよね。 BOXをクリックすると名前が出たり消えたりするので遊んでみて下さい。 初代の家康と５代目綱吉、８代目吉宗、最後の１５代目の慶喜は始めは出た状態ですが、これ…

はじめに いままでcssは素のcss, pure cssで書いていました。 これをsass(scss)に変えて行こうと思う。 とりあえず実験です。 実行例 See the Pen sass(scss) sample by kalz2q (@kalz2q) on CodePen. 説明 codepenでは設定でscssを選択できた。 ローカルで…

はじめに range sliderのサンプルです。スライダーをマウスで操作すると数字が変わります。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. 説明 とりあえず値を得ることが出来たのでこれからいろいろ使えそうです。 sliderを使った例はネッ…

はじめに 画像をクリックするとなにか印が付いたり印を外したりするのを作りたいと思いました。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. 説明 仕組みを作り込むかcheckboxでやるか。今回はcheckboxでやりました。 とりあえず思ったよ…