TypeScript 入門の記録(10)三目並べを作ってみる(その4)
前回やっと、各ボタンのインデックスをラベル表示する9個のボタンを並べて表示することができました。今回は、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>;
}
Board の state どうやって渡せばいいのかしら???
さて、Boardに打ち手がXなのかOなのかのstateと、9個のマス目の値を管理する配列を持たせて、それをボタンクリックに反映させようと思います。
と思ったのですが、Reactチュートリアルのままだと、stateのsquare配列が認識されません。困った。。。
ああ、もうこんな時間じゃないですか。明日も仕事があるので、今日はここまで。無念。。。次回は、ここを解決してBoardクラスで管理する値をボタンに反映させたいと思います。