React で作る input その2

未入力の場合はフィールドの値が未入力の場合に色を変える → 前回
全ての値が入力されたら次の画面へ進む

Input を継承して新しいコンポーネントを作成

このままだと実装できないので前回のinputを継承してInput2を作る
valueCheck をオーバーライドして確認用のログを表示

Input2.jsx


import React from 'react';
import Input from './Input';

class Input2 extends Input {
  valueCheck(event){
    console.log("test");
  }
}

export default Input2;

フォーム画面を作成

jsx.jsx

import React from 'react';

// components
import Input2 from './Input2';

class Form extends React {
  render() {
    return (
      <div>
        <form action="">
          <Input2 />
          <Input2 />
        </form>
      </div>
    );
  }
}
export default Form;

判定用のフラグリスト

ここからはちょっとゴリ押し気味で好きじゃないんだけど
画面内のinputの入力フラグの状態を保持する配列を作ります

<Input2 />  ←　こいつだけ入力されていると仮定
<Input2 />

[true,false] こんな感じで画面内のInput2の状態を保持している配列を作成

全てが入力された状態になっているかどうかを判定するフラグも作成します
それをInput2にpropsで渡します

Form.jsx


class Form extends React {
  constructor(props) {
    super(props);
    this.state = {
      flagList: [false,false], //初期値
      checkFlag: false //名前がイケテナイ
    }
  }
  render() {
    return (
      <div>
        <form action="">
          <Input2 index={0} list={this.state.flagList}/> //indexを無理やり固定値で渡す・・・
          <Input2 index={1} list={this.state.flagList}/>
        </form>
      </div>
    );
  }
}
export default Form;

全て入力されていたらフラグを変更

・値が変更されたら、その要素のListのフラグを変更
・全てのフラグがtrueになったら checkFlag を true にする
・親で定義したメソッッドを子のInput2にpropsで渡す

Form.jsx

class Form extends React {
  constructor(props) {
    super(props);
    this.state = {
      flagList: [false,false], //初期値
      checkFlag: false //名前がイケテナイ
    }
    this.flagListUpdate = this.flagListUpdate.bind(this);
    this.stateEvery = this.stateEvery.bind(this);
  }
  flagListUpdate(list,index, flag){
      list[index] = flag
      this.setState({flagList: list});
      this.setState({checkFlag: this.state.flagList.every(this.stateEvery)});
  }
  stateEvery(element){
    return (element === true);
  }
  render() {
    return (
      <div>
        <form action="">
          <Input2 index={0} list={this.state.flagList} flagListUpdate={this.flagListUpdate} /> //indexを無理やり固定値で渡す・・・
          <Input2 index={1} list={this.state.flagList} flagListUpdate={this.flagListUpdate} />
        </form>
      </div>
    );
  }
}
export default Form;

渡されたpropsとメソッドをカーソルが離れた瞬間に実行

Input2.jsx


import React from 'react';
import Input from './Input';

class Input2 extends Input {
  valueCheck(event){
    this.props.flagListUpdate(this.props.list, this.props.index, !!event.target.value)
  }
}
export default Input2;

あとは全てのInput2に値が入力されれば checkFlag がtrueになるので


{ checkFlag ? <input type="submit"> : <div /> }

上のようにボタンの表示を切り替えれば問題なしです

とりあえず、こんな感じでclassの継承を使ってInputに影響を与えることなく
別機能のInputコンポーネントができました

classとReactの相性がよくてとても使いやすいですね〜
結構冗長な書き方になってしまったので何かこうしたら方がスッキリするなどのアドバイスがあれば宜しくお願い致します！！