React で作る input その1

React で作る input

全画面で使える共通のinput
1. 未入力の場合はフィールドの値が未入力の場合に色を変える
2. 全ての値が入力されたら次の画面へ進む(次回)

input コンポーネントを作る

input.jsx

import React from 'react';

class Input extends React {
  render() {
    <input type="text"/>
  }
}

export default Input;

入力されたか判定するフラグを初期値で設定

input.jsx

class Input extends React {
  constructor(props) {
    super(props);
    this.state = {
      isSet: true
    }
  }
  render() {
    return (
      <input style={{ backgroundColor : this.state.isSet ? "white" : "gray"  }} type="text" onBlur={this.valueChecker}/>
    );
  }
}

カーソルが離れた時に値によってstateを変更

input.jsx

class Input extends React {
  constructor(props) {
    super(props);
    this.state = {
      isSet: true
    }
    this.valueCheck = this.valueCheck.bind(this);
  }
  valueCheck(event){
    this.setState({isSet: !!event.target.value});
  }
  render() {
    return (
      <input style={{ backgroundColor : this.state.isSet ? "white" : "gray"  }} type="text" onBlur={this.valueCheck}/>
    );
  }
}