【cordova-react】チェックボックス実装

reactを勉強してから今に至るまで数多くのコンポーネントを作っていました。今作っているアプリにチェックボックスが必要ということ

が分かり色々参考にしながら実装することになりました。チェックボックスとはアンケートなどでよく使われる一般的なコンポーネント

で、クリックするとレ点が出現します。これをtrueの状態と呼び、レ点が入っていない時はfalseになっている状態と頭の隅に置いておき

ましょう。今回のポイントとしては以下の2点に重点を置きました。↓

・チェックボックスが一つだけあるフォーム

・trueになった時にある値をsetStateする

チェックボックスが複数ある時はmapでまとめてrenderに描画できるよな、でも単体でも機能してくれるのかな？みたいな疑問が浮かび

ましたが杞憂に終わりました。チェックボックス一つだけの実装はそんなこと考えるまでもなくさくっとできてしまいました。

前置きで黒く箇条書きで書いてしまいましたが大したことではなかったです、すみません・・。

<input type="checkbox" value="1" onChange = {this.onPermission} defaultChecked={this.state.checked} ></input>利用規約に同意する

こんな感じです。もしよかったらコピペして使ってみてください。defaulCheckedで初期値がtrueかfalseか選べます。

２点目もそこまで大したことない・・・ですがコンポーネントの作り方自体分からなくて躓いている初心者の方々のためにあえて簡単に

抽象的に説明します。字面通りですがtrueになった時にsetstateで値を飛ばしてあげるという単純明快な行為です。

<pre>  onPermission(e) {
    this.setState({checked: !this.state.checked});
    if (this.state.checked) {
      return;
    } else {
      console.log('success');
      const date = new Date();
      this.setState({permission: date});
    }
  }
</pre>

長ったらしいのは好きでないのでコード載せちゃいますね。(#^^#)

動作はそのまま、onPermissionが押されたらcheckedの値がsetStateされます。手前のビックリマークは現在のcheckedパラメータではない

ほう、つまりデフォルトの値falseの逆の値のtrueをsetStateしますよ！という意味になります。

falseのままだとreturnで何もせず、trueならば現在時刻をsetStateするコードだとはっきり見て取れると思います。

確実にこれより綺麗なコードは存在するのですが、僕みたいにreact始めたばかりの方は経験が浅いうちはこれくらいの雑多なコードのほ

うが覚えやすい気がします。