React refで作るチェックリスト

#Reactで作るチェックリスト

##要件

• 任意の数のチェックリストがある
• 確認ボタンがある(不活性状態)
• 全てにチェックがつくと確認ボタンが活性化する

##機能

• checkFlag: 全てのチェックが付いてるか判定するフラグ(state)
• checkList: チェックボックスの値を保持した配列(const)
• flagListUpdate: checkFlagの値を変更する
• stateEvery: checkListの値が全てtrueか判定する(everyで即時関数渡すのが嫌だから)

##実装

CheckList

class CheckList extends React.Component {
  constructor(props) {
    super(props);   
    this.state = {
       checkFlag: false
    }
    this.flagListUpdate = this.flagListUpdate.bind(this);
  }
  flagListUpdate(list){
    this.setState({ checkFlag: list.every(this.stateEvery) });
  }
  stateEvery(element){
    return element.checked === true;
  }
  
  render() {
    const flagList = [];
    return (
      <div>
        <input
          type="checkbox"
          ref={el => {flagList.push(el)}}
          onClick={() => this.flagListUpdate(flagList)}
        />
        <input
          type="checkbox"
          ref={el => {flagList.push(el)}}
          onClick={() => this.flagListUpdate(flagList)}
        />
        <button
          className={
            `button ${this.state.checkFlag && 'button--on'}`
          }
        >submit</button>
      </div>
    );
  }
}

##概要
各inputのrefを保管するflagListを初期化したあと、
ref = {el => { flagList.push(el) }} で 画面読み込み時に flagList にDOMの情報を追加して行く
あとは、その配列が全て true かどうか判定するだけ

CodePen

CodePen　にも動いているものを公開したのでご参考ください

See the Pen React Ref checkList by Hideto (@HidetoNagamatsu) on CodePen.