Reactで以前のstateの値を取得するには

Question

ReactとTypeScriptでスロットゲームを作っています。ボタンを押すと複数のサイコロを押すというものです。
このスロットの追加機能として、サイコロごとにチェックボックスをつけ、チェックがついたサイコロはボタンを押しても回転しないようにしたいと思っています。

このとき、チェックがついたサイコロだけ再レンダリングさせないためにはどうすればいいかで悩んでいます。

今のコードは以下です。

import * as React from 'react';
import * as ReactDOM from 'react-dom';

interface IndexProps {
}

interface IndexState {
    rolling: boolean;
    dicePip: Array<string>;
}

class Index extends React.Component<IndexProps, IndexState> {
    timerId: number;
    constructor(props: IndexProps) {
        super(props);
        this.state = {
            rolling: false,
            dicePip: ['\u2680', '\u2680', '\u2680', '\u2680', '\u2680', '\u2680', '\u2680', '\u2680', 
                      '\u2680', '\u2680', '\u2680', '\u2680', '\u2680', '\u2680', '\u2680', '\u2680']
        }
        this.buttonClick = this.buttonClick.bind(this);
    }
    static pipsList = ['\u2680', '\u2681', '\u2682', '\u2683', '\u2684', '\u2685'];
    buttonClick(): void {
        this.setState({
            rolling: true
        });
        this.runSlot();
    }
    runSlot(): void {
        let counter: number = 0;
        this.timerId = setInterval(
            () => {
                this.randomDicePips();
                counter++;
                if (counter >= 20) {
                    clearInterval(this.timerId);
                    this.stopSlot();
                }
            }, 50
        );
    }
    randomDicePips(): void {
        let nextPips: Array<string> = new Array;
        for (let i=0; i<16; i++) {
            nextPips.push(Index.pipsList[Math.floor(Math.random() * Index.pipsList.length)]);
        }
        this.setState({
            dicePip: nextPips
        }) 
    }
    stopSlot(): void {
        this.setState({
            rolling: false
        });
    }
    render() {
        let diceElements: Array<JSX.Element> = new Array;
        for (let i=0; i<16; i++) {
            diceElements.push(
                <Dice className="dice" dicePips={this.state.dicePip[i]} id={'cb' + String(i)} rolling = {this.state.rolling}/>
            );
        }
        return (
            <div>
                <div id="container">
                    {diceElements}
                </div>
                <div id = "menu">
                    <Button buttonClick = {this.buttonClick} rolling = {this.state.rolling}/>
                </div>
            </div>
        );
    }
}

interface DiceProps {
    className: string;
    dicePips: string;
    id: string;
    rolling: boolean;
}

class Dice extends React.Component<DiceProps> {
    constructor (props: DiceProps) {
        super(props);
    }

    render() {
        return (
            <div className='panel'>
                <div className={this.props.className}>{this.props.dicePips}</div>
                <div className="hold"><input type="checkbox" id={this.props.id} disabled /><label htmlFor={this.props.id}>Hold</label></div>
            </div>
        );
    }
}

interface ButtonProps {
    buttonClick(): void;
    rolling: boolean;
}

const Button: React.StatelessComponent<ButtonProps> = (props) => {
    return (
        <div id="button" className={props.rolling ? "inactive" : ""} onClick={props.buttonClick}>
            <span id="label">Roll</span>
        </div>
    );
}

現状では、ボタンを押すとrunslotメソッドが呼び出され、その内部ではrandomDicePipsメソッドをsetIntervalで繰り返し呼んでいます。
randomDicePipsメソッドの中では、出された値をnextPipsというArrayの中に入れ、そのArrayを新しいdicePipStateとし、各サイコロの目としてレンダリングしています。

nextPipsArrayを作る際に、チェックされたサイコロのみ以前のStateの値を入れるようにすればよいと思っているのですが、どのようにその値を取得すればよいのか、うまい方法が思いついていません。
何か良い手はあるでしょうか？

Answer 1

こんなかんじでいいんですかね。あまりReactにdocument.getElement~を持ち込みたくないですが、せっかくidをチェックボックスに付与しているのでこれを利用して取得してみました。
多分これが一番早いと思います。

    randomDicePips(): void {
        let nextPips: Array<string> = new Array;
        for (let i=0; i<16; i++) {
            // idから該当のチェックボックスのelementを取得
            let checkbox = document.getElementById('cb' + i);
            let pip = null;
            // チェック状態の確認
            if(checkbox.checked) {
                // this.state.dicePipから前回の値を引き継ぐ
                pip = this.state.dicePip[i];
            }
            else {
                // 従来通りランダムに取る
                pip = Index.pipsList[Math.floor(Math.random() * Index.pipsList.length)];
            }
            nextPips.push(pip);
        }
        this.setState({
            dicePip: nextPips
        }) 
    }

あれ？でもこれDiceが再レンダリングされたらチェックボックスの状態が元に戻ってしまうのでは…？

Comments

[Udomomo]

`document.getElement`を使う手がありましたね。ありがとうございます。
チェックボックスの状態が元に戻るのは確かにその通りです...気づきませんでした。どう対応するかは改めて考えてみます。

[masaya_ohashi]

本当はチェックボックスの対応も方法はわかっているのですが書いたらかなり既存コードを書き換えてしまうので、自分でまずは試してみてください。