react.js
React

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.