ameeeee
9/28/2019 - 1:57 PM

REACT 学習メモ

メモ

  • return内にhtml記述(REACTではJSX
  • return内は一つの要素のみ(要素が複数ある場合はdivなどで囲む
  • コメントは{/* コメント */}
  • imgタグには閉じタグが必要(img src="" />
  • return内でのjsは{}内に記述(クォーテーションの有無に注意
render() {
  const greeting = 'hello';
  const imgUrl = 'https://aaa.com/aaa.png'
  return(
    <h1>{greeting}</h1>
    <img src={imgUrl} / >
  );
}
  • stateはconstructor内に記述
  • 値のセットはthis.setState({ プロパティ: 値});
  • クラスはclassName="" で要素で指定
  • <input>は<input />、<textarea></textarea>は<textarea />
<div onClick={ () => {this.myFunc()} } >
<form onSubmit={ () => {this.myFunc()} } >
<input onChange={ (event) => { event.target.value } } />
handleEmailChange(event) {
  const inputValue = event.target.value;
  this.setState({email: inputValue});
}
<input
  value={this.state.email}
  onChange={(event) => {this.handleEmailChange(event)}}
/>

コード

import React from 'react'; // 定型 パッケージの読み込み

class App extends React.Component { // 定型
  constructor(props) { // 定型
    super(props); // 定型
    this.state = { name: '名前' };
    this.count = { count: 0 };
  }
  handleClickName(name) {
    this.setState({name: name});
  }

  render() { // 定型
    return ( // 定型
      <div>
        <button onClick={ ()=> { this.handleClickName('名前2') }>ボタン1</button>
        <h1>hello, {this.state.name}</h1>
        <button onClick={ this.handleClickCount() }>ボタン2</button>
        <p>{ this.state.count }</p>
      </div>
    );
  }
}
export default App; // 定型

フォーム入力

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
            onChange={ (event) => { this.handleContentChange(event) } }
            value={ this.state.content }
          />
          {contentErrorText}
          
          <input
            type='submit'
            value='送信'
          />
        </form>
      );
    }
    
    return (
      <div className='contact-form'>
        {contactForm}
      </div>
    );
  }
}

export default ContactForm;

関連リンク