メモ（React　IV） - BNBのプログラミング勉強記録

基本

フォームが送信されたときに処理を実行するには、formタグに対してonSubmitイベントを指定する
フォームの入力や削除が行われたときに処理を実行するには、onChangeイベントを用いる。inputタグに対してonChangeイベントを指定する。
入力値の取得は、onChangeイベントの関数にeventという引数を追加し、event.target.valueとすると取得できる。eventとevent.target.valueはセットで覚えておく
複数のstateを更新する場合、コンマ(,)で区切り一度のsetStateでまとめて変更する

総合演習

構造は以下の通り。

Mainの中にContactFormコンポーネントを配置
ContactFormにて以下を実施
コンストラクタにて右の５つのステートを定める。isSubmitted,email,hasEmailError,content,hasContentError
フォームで送信ボタンが押されたら、onSubmitイベントにてhandleSubmitメソッドが実行され、isSubmittedステートがトゥルーになる
ルー大柴
それにより送信完了画面が出てくる（イフ文にて「isSubmittedがトゥルーだったら定数contactFormに送信完了メッセージを代入する」処理を行う。トゥルーで定数表示（すなわち送信完了表示）、else（ていうか初期状態）でフォームが表示される、というなんとも頭がぐるぐるする仕組み。）
メール欄inputに入力すると、onChangeイベントによりhandleEmailChangeメソッドが実行される。入力されたものが引数eventとして渡され、emailステートが書き換わる。
同メソッド内で、もしカラだったらisEmptyをトゥルーにする処理を行う。その結果をhasEmailErrorに代入する。
hasEmailErrorステートがトゥルーだったら、定数emailErrorTextにエラーメッセージを代入する。で、その定数emailErrorTextをメール欄inputの下に置く。これにより、メール欄がカラだったらエラーメッセージが表示される。
テキストエリアもメール欄inputと全く同じ仕組み。
てか、文字打つ前に送信押すと、エラーメッセージ出ずにとおっちゃうなあ。文字入れて消すとエラー出るけど。Reactの最終レッスンがこれで、いいのか。
多分、Reactのかなり浅い部分に俺はいる。
概念はなんとなくつかめた。

//Main

import React from 'react';
import Lesson from './Lesson';
import ContactForm from './ContactForm';

class Main extends React.Component {
  render() {
    const lessonList = [
      {
        name: 'HTML & CSS',
        image: 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/html.svg',
        introduction: 'WEBページはHTML、CSSという言語によってその見た目が作られています。 実際にWEBページを作りながら学んでみましょう！',
      },
      {
        name: 'Sass',
        image: 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/sass.svg',
        introduction: 'SassはCSSをより便利に効率的にするための言語です。',
      },
      {
        name: 'JavaScript',
        image: 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/es6.svg',
        introduction: 'JavaScriptはフロントエンドだけでなく、サーバーサイドまで広い可能性を持つプログラミング言語です。',
      },
      {
        name: 'React',
        image: 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/react.svg',
        introduction: 'ReactはHTMLのように、サイトの見た目をつくることができるJavaScriptのライブラリです。',
      },
    ];

    return (
      <div className='main-wrapper'>
        <div className='main'>
          <div className='copy-container'>
            <h1>Hello, World.</h1>
            <h2>プログラミングの世界へようこそ！</h2>
          </div>
          <div className='lesson-container'>
            <h3>学べるレッスン</h3>
            { lessonList.map((lessonItem) => {
              return (
                <Lesson
                  name={ lessonItem.name }
                  image={ lessonItem.image }
                  introduction={ lessonItem.introduction }
                />
              );
            }) }
          </div>
          <div className='contact-container'>
            <h3>お問い合わせ</h3>
            <ContactForm />
          </div>
        </div>
      </div>
    );
  }
}

export default Main;

//ContactForm

import React from 'react';

class ContactForm extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isSubmitted: false,
      email: '',
      hasEmailError: false,
      content: '',
      hasContentError: false,
    };
  }

  handleEmailChange(event) {
    const inputValue = event.target.value;
    const isEmpty = inputValue === '';
    this.setState({
      email: inputValue,
      hasEmailError: isEmpty,
    });
  }

  handleContentChange(event) {
    const inputValue = event.target.value;
    const isEmpty = inputValue === '';
    this.setState({
      content: inputValue,
      hasContentError: isEmpty,
    });
  }

  handleSubmit() {
    this.setState({isSubmitted: true});
  }

  render() {
    let emailErrorText;
    if (this.state.hasEmailError) {
      emailErrorText = (
        <p className='contact-message-error'>
          メールアドレスを入力してください
        </p>
      );
    }
    

    let contentErrorText;    
    if (this.state.hasContentError) {
      contentErrorText = (
        <p className='contact-message-error'>
          お問い合わせ内容を入力してください
        </p>
      );
    }
    
    let contactForm;
    if (this.state.isSubmitted) {
      contactForm = (
        <div className='contact-submit-message'>
          送信完了
        </div>
      );
    } else {
      contactForm = (
        <form onSubmit={() => {this.handleSubmit()}} >
          <p>メールアドレス（必須）</p>
          <input
            value={this.state.email}
            onChange={(event) => {this.handleEmailChange(event)}}
          />
          {emailErrorText}

          <p>お問い合わせ内容（必須）</p>
          <textarea
            value={this.state.content}
            onChange={(event) => {this.handleContentChange(event)}}            
          />
          {contentErrorText}
          
          <input
            type='submit'
            value='送信'
          />
        </form>
      );
    }
    
    return (
      <div className='contact-form'>
        {contactForm}
      </div>
    );
  }
}

export default ContactForm;