Reactで〇×ゲーム

今回はReactで〇×ゲームを作ってみました！！
だんだん慣れてきて、自分の思ったように作れるようになってきました！！

出来たものはこちらになります。

シンプルだけどきれいにできたかな？と自画自賛w。

今回、3×3の枠ごとにonClickイベントを用意しているのですが、当初それぞれのイベント対して関数を用意して処理を行っていたのですが、、、
1つにまとめたいよ！！なんか同じ関数が並んで醜いよ！！

と思い、別の方法を検討しました。

同じ関数にしてしまうと3×3のどの枠をクリックしたのか判定できなくなってしまうため、引数にて判断する方法にしました！！

javascriptだとこちらのように引数を与えてあげればできる。
JavaScriptとonclickのサンプル | ITSakura

下記を作成し、、、実行！！

 <tr>
     <td><input type="text" id="osero11" onClick={this.onClick("osero11" )} className="Mas" /></td>
     <td><input type="text" id="osero12" onClick={this.onClick("osero12" )}  className="Mas" /></td>
     <td><input type="text" id="osero13" onClick={this.onClick("osero13" )}  className="Mas" /></td>
 </tr>
 <tr>
     <td><input type="text" id="osero21" onClick={this.onClick("osero21" )} className="Mas" /></td>
     <td><input type="text" id="osero22" onClick={this.onClick("osero22" )} className="Mas" /></td>
     <td><input type="text" id="osero23" onClick={this.onClick("osero23" )} className="Mas" /></td>
 </tr>
 <tr>
     <td><input type="text" id="osero31" onClick={this.onClick("osero31" )} className="Mas" /></td>
     <td><input type="text" id="osero32" onClick={this.onClick("osero32" )} className="Mas" /></td>
     <td><input type="text" id="osero33" onClick={this.onClick("osero33" )} className="Mas" /></td>
 </tr>

あれ？？うまくいかない。。。
どうやらReactの場合、こちらの方法ではうまくできないよう。

もう少し調べてみると、アロー演算子を用いて、こちらのようにすれば引数を与えられるとのこと。

<button onClick={ () => this.click(1) }>One</div>

【React】イベントハンドラで引数を使いたい【備忘録】 - Qiita

ということで、こちらのように作成し、実行！！

 <tr>
     <td><input type="text" id="osero11" onClick={() => this.onClick("osero11" )} className="Mas" /></td>
     <td><input type="text" id="osero12" onClick={() => this.onClick("osero12" )}  className="Mas" /></td>
     <td><input type="text" id="osero13" onClick={() => this.onClick("osero13" )}  className="Mas" /></td>
 </tr>
 <tr>
     <td><input type="text" id="osero21" onClick={() => this.onClick("osero21" )} className="Mas" /></td>
     <td><input type="text" id="osero22" onClick={() => this.onClick("osero22" )} className="Mas" /></td>
     <td><input type="text" id="osero23" onClick={() => this.onClick("osero23" )} className="Mas" /></td>
 </tr>
 <tr>
     <td><input type="text" id="osero31" onClick={() => this.onClick("osero31" )} className="Mas" /></td>
     <td><input type="text" id="osero32" onClick={() => this.onClick("osero32" )} className="Mas" /></td>
     <td><input type="text" id="osero33" onClick={() => this.onClick("osero33" )} className="Mas" /></td>
 </tr>

上手くできた！！

最後に、、、

だんだんReactでかけるようになってきたのですが、
もう少し使えるようになりたいのでどんどん新しいWebアプリを作っていきたいと思います！！

実はこちらの方を尊敬して始めたWebアプリの作成。
元教員がWebアプリを毎日1つずつ作ってみた（6〜10日目）｜印南聡志｜note
元教員がWebアプリを毎日1つずつ作ってみた（11〜15日目）｜印南聡志｜note

やってみてその偉大さがわかる。。。
毎日作成できない。。。
出来ても2日に1個です。。。

もっと精進していきたいと思います！！