React初心者のまとめ（基本編：3/3）

import React from 'react';
import { render } from 'react-dom';

// テキスト入力フィールドのコンポーネント
class FormInputText extends React.Component {

  // 未入力の場合はエラー表示
  renderErrorText() {
    return this.props.valid ? false : (
      <p className="invalid">項目が入力されていません。</p>
    )
  }

  render(){
    return (
      <div>
        <label>{this.props.label}</label>
        <input type="text" name={this.props.name} defaultValue={this.props.value} onChange={this.props.inputChk} />
        {this.renderErrorText()}
      </div>
    )
  }
}

// フォームのコンポーネント
class MyForm extends React.Component {

  constructor(props, context) {
    super(props, context)
    this.state = {
      field: {
        name: { name: 'name', label: 'お名前', value: null, valid: null },
        address : { name: 'address', label: '住所', value: null, valid: null }
      },
      errFlg : true,
    }
  }

  // 入力チェック（入力されていなかったらエラー）
  inputChk(e, fieldName) {
    const field = Object.assign({}, this.state.field);
    let value = e.target.value.trim();
    field[fieldName] = {
      value: value,
      valid: value ? true : false
    }
    this.setState({ field: field });
    // 単に this.setState({ field });でも可

    // 入力項目の状態全チェック
    this.allChk(field);
  }

  // 全項目の入力チェック
  allChk(fieldState) {
    let errFlg = false;
    let field = fieldState || this.state.field;

    Object.keys(field).forEach(_fieldName => {
      if (!field[_fieldName].valid) {
        errFlg = true;
      }
    });
    this.setState({ errFlg: errFlg });
    return !errFlg;
  }

  // 送信処理
  sendForm() {
    // 送信前に入力内容を再チェック
    if (!this.allChk()) {
      return false;
    }

    // 送信するデータをまとめる
    const sendData = Object.keys(this.state.field).map(_fieldName => {
      return {
        name: _fieldName,
        value: this.state.field[_fieldName].value,
      }
    });

    // 送信処理を行う関数
    this.props.sendForm(sendData);
  }

  render() {
    return (
      <div>
        <FormInputText {...this.state.field.name} inputChk={(e) => this.inputChk(e, 'name')} />
        <FormInputText {...this.state.field.address} inputChk={(e) => this.inputChk(e, 'address')} />
        <div>
          <button onClick={() => this.sendForm()} disabled={this.state.errFlg}>送信する</button>
        </div>
      </div>
    )
  }
}

render(<MyForm />, document.getElementById('root'));

$ npm install --save react-router-dom

import React from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';

// 入力画面
class FormInput extends React.Component {
　…
}

// 確認画面
class FormConfirm extends React.Component {
　…
}

// 完了画面
class FormComplete extends React.Component {
　…
}

class RouterComponent extends React.Component {
    render(){
        return(
            <BrowserRouter>
                <Switch>
                    <Route exact path="/" component={FormInput}/>
                    <Route path="/confirm" component={FormConfirm}/>
                    <Route path="/complete" component={FormComplete}/>
                </Switch>
            </BrowserRouter>
        )
    }
}

import React from 'react';
import {HashRouter, Route, Switch} from 'react-router-dom';

/* (省略) */

class RouterComponent extends React.Component {
    render(){
        return(
            <HashRouter hashType="noslash">
                <Switch>
                    <Route exact path="/" component={FormInput}/>
                    <Route path="/confirm" component={FormConfirm}/>
                    <Route path="/complete" component={FormComplete}/>
                </Switch>
            </BrowserRouter>
        )
    }
}

<Route exact path="/" component={FormInput}/>
    ↓
<Route exact path="/" render={props => <FormInput data={this.state.data} />} />

<Route path="/edit/:id" component={EditPage}/>

class EditPage extends React.Component {
    render(){
        return(
            <p>ID:{props.match.params.id}</p> // URLから取得したIDを表示
        )
    }
}

<ul>
    <li><Link to="/">Home</Link></li>
    <li><Link to="/about">About</Link></li>
    <li><Link to="/company">Friends</Link></li>
</ul>

<Route exact path="/" render={() => (
    loggedIn ? (
        <Redirect to="/dashboard"/>
    ) : (
        <PublicHomePage/>
    )
)}/>