contact-use-ref.jsx

import React from "react"
import { Link } from 'react-router'

export default class Contact extends React.Component{
  static _form = {}

  constructor(props) {
    super(props)

    this.state = {
      send:false
    }
  }

  componentWillUpdate(nextProps,nextState){
    if(this.props.isFetching === true && nextProps.isFetching === false){
      this.setState({
        send:true
      })
    }
  }

  SendContact = (e) => {
    const _form = Contact._form

    let err = 0;
    /* name */
    if(!_form.name.value){
      err++
      _form.name.parentNode.classList.add("has-danger")
    }
    else{
      _form.name.parentNode.classList.remove("has-danger")
    }

    /* email */
    if(!_form.email.value){
      err++
      _form.email.parentNode.classList.add("has-danger")
    }
    else{
      _form.email.parentNode.classList.remove("has-danger")
    }

    /* content */
    if(!_form.content.value){
      err++
      _form.content.parentNode.classList.add("has-danger")
    }
    else{
      _form.content.parentNode.classList.remove("has-danger")
    }

    if(err) return false

    /* send */
    this.props.actions.contact.send({
      name:_form.name.value,
      email:_form.email.value,
      content:_form.content.value
    })
  }

  render() {
    const { isFetching } = this.props

    return (
      <div className="account-component">
        <div className="bread"><h1>お問い合わせ</h1></div>
        {!this.state.send?
          <ContactForm
            isFetching={isFetching}
            SendContact={this.SendContact} />:
          <ContactThanks />}
      </div>
    )
  }
}

const ContactForm = ({ isFetching, SendContact }) => (
  <div className="container">
    <div className="form-group">
      <label>お名前</label>
      <input type="text" className="form-input input-lg" ref={el => el?Contact._form[el.name] = el:false} name="name" />
      <p className="form-input-hint">お名前を入力してください</p>
    </div>

    <div className="form-group">
      <label>メールアドレス</label>
      <input type="email" className="form-input input-lg" ref={el => el?Contact._form[el.name] = el:false} name="email" />
      <p className="form-input-hint">メールアドレスを正しく入力してください</p>
    </div>

    <div className="form-group">
      <label>お問い合わせ内容</label>
      <textarea name="content" className="form-input input-lg" ref={el => el?Contact._form[el.name] = el:false} />
      <p className="form-input-hint">お問い合わせ内容を入力してください</p>
    </div>

    <div className="form-group btn-wrapper">
      <button type="button" className={`btn ${isFetching && "loading"}`} onClick={SendContact}>送信する</button>
    </div>
  </div>
)

const ContactThanks = () => (
  <div className="container">
    <p className="text-center">お問い合わせありがとうございます。<br />担当よりご返信させていただきます。ご回答までいましばらくおまちください。</p>
    <Link to="/" className="btn">トップへ戻る</Link>
  </div>
)