TypeScript 入門の記録（１０）三目並べを作ってみる（その４）

前回やっと、各ボタンのインデックスをラベル表示する９個のボタンを並べて表示することができました。今回は、React公式チュートリアルの「インタラクティブなコンポーネントを作る」を参考に、各ボタンをクリックしたら、'X'を表示するようにします。それができたら「クリックしたらボタンの色が変わる」ようにしてみたいと思います。わくわく。

インタラクティブなコンポーネントを作る

React公式チュートリアルを参考に、固定ラベル表示中のボタンをインタラクティブなコンポーネントに修正していきます。

クリック時のイベント処理を追加する

React 公式チュートリアルを参考に、ボタンがクリックされたら、console.log('click') が実行されるようにします。

const TICTACButton: VFC<Props> = ({index}) => {
  const blabel = index;
  return <span className = "likeButton" onClick={()=> console.log('click')}>{blabel}</span>;
}

ボタンをクリックすると、consoleにclickと表示されました

Board の state どうやって渡せばいいのかしら？？？

さて、Boardに打ち手がXなのかOなのかのstateと、９個のマス目の値を管理する配列を持たせて、それをボタンクリックに反映させようと思います。

配列は初期化できたけれど、ボタンに値を渡せない。。。

と思ったのですが、Reactチュートリアルのままだと、stateのsquare配列が認識されません。困った。。。

ああ、もうこんな時間じゃないですか。明日も仕事があるので、今日はここまで。無念。。。次回は、ここを解決してBoardクラスで管理する値をボタンに反映させたいと思います。