TIL REACT#4状態(アプリケーション登録検証)

State

stateは単語の意味で、内部素子の状態値を表します.
stateは、ユーザーに表示するコンポーネントのUI情報(ステータス)を含むオブジェクトフォーマットです.
stateの値は変更できます.

じょうたいしよう

import React from 'react';

class State extends React.Component {
  constructor() {
    super();
    this.state = {
      color: 'red'
    };
  }

  render() {
    return (
      <div>
        <h1>Class Component | State</h1>
      </div>
    );
  }
}

export default State;

Class型コンポーネントにはコンストラクション関数があり、stateが作成されます.
this.state値にstateを入れることで素子の初期状態値を設定します.
現在の構成部品のstate colorのキー値はredですが、ステータスに応じて後で変更できます.
これはjavascriptで初期値変数として宣言し、後でインポート時に値を変更する過程で書き込まれた内容とは少し異なると思いますが、似ています.
これは、コンポーネント内の要素にステータス値を反映し、データを変更するたびにUIに表示するためです.

イベントとsetState

import React, { Component } from 'react';

class State extends Component {
  constructor() {
    super();
    this.state = {
      color: 'red',
    };
  }

  handleColor = () => {
    this.setState({
      color: 'blue'
    })
  }

  render() {
    return (
      <div>
        <h1 style={{ color: this.state.color }}>Class Component | State</h1>
        <button onClick={this.handleColor}>Click</button>
      </div>
    );
  }
}

export default State;

上記のコードの実行順序はconstructor->reder()なので、まずstate初期値を
Webインタフェースは、OK、レンダリング後に表示されます.
ボタンを押してステータス値を変更し、h 1ラベル内の色を変更します.
1.ステータス値の指定
2.buttonにonClickイベントを与え、={}などのthis.실행될함수内で実行される関数を記述する.
3.コンストラクション関数とreder()の間に実行する関数を記述します.上記の例はhandleColorとして記述されています.
4.関数は矢印関数(arrow関数)を使用し、内容はthisを使用します.setStateでは、関数が実行されたときに初期状態がどのように変化するかを記述します.
5.h 1ラベル内にインラインスタイルを作成します.state.カラーというJSX言語があるからです.
中に記入してください.

実験(Instagram登録画面)

import React from 'react';
import { Link, withRouter } from 'react-router-dom';
import './Login.scss';

class Login extends React.Component {
  constructor() {
    super();
    this.state = {
      idValue: '',
      pwValue: '',
    };
  }

  goToMain = () => {
    this.props.history.push('/main-myung');
  };

  handleInput = e => {
    const { value, name } = e.target;
    this.setState({
      [name]: value,
    });
  };

  render() {
    return (
      <div className="login-myung">
        <div className="login-top">
          <div className="side-img">
            <img alt="스마트폰" src="./Images/MyungJunKim/smartphone.png" />
            <div>
              <img
                className="side-img-screen"
                alt="스마트폰 화면"
                src="./Images/MyungJunKim/rolling-4.jpeg"
              />
            </div>
          </div>
          <div className="login-container">
            <div className="login-wrapper">
              <h1>westargram</h1>
              <main>
                <form onSubmit={this.goToMain}>
                  <div className="login-input">
                    <input
                      name="idValue"
                      onChange={this.handleInput}
                      value={this.state.idValue}
                      type="text"
                      placeholder="전화번호,사용자 이름 또는 이메일"
                    />
                    <input
                      name="pwValue"
                      onChange={this.handleInput}
                      value={this.state.pwValue}
                      type="password"
                      placeholder="비밀번호"
                    />
                  </div>
                  <button
                    className="login-button"
                    disabled={
                      !(
                        this.state.idValue.includes('@') &&
                        this.state.pwValue.length >= 5
                      )
                    }
                  >
                    <span>로그인</span>
                  </button>
                </form>
              </main>
              <footer className="login-footer">
                <div className="login-bar-container">
                  <div className="login-bar"></div>
                  <div>또는</div>
                  <div className="login-bar"></div>
                </div>

                <button>
                  <i className="fab fa-facebook-square"></i>
                  Facebook으로 로그인
                </button>
                <Link to="/">비밀번호를 잊으셨나요?</Link>
              </footer>
            </div>
            <aside>
              <div>
                <span>계정이 없으신가요?</span>
                <span>가입하기</span>
              </div>
            </aside>
            <div className="store">
              <div>앱을 다운로드하세요.</div>
              <div className="store-img">
                <img alt="앱스토어" src="./Images/MyungJunKim/apple.png" />
                <img
                  alt="구글스토어"
                  src="./Images/MyungJunKim/googleplay.png"
                />
              </div>
            </div>
          </div>
        </div>
        <div className="login-bottom">
          <p>
            소개 &nbsp; &nbsp;블로그 &nbsp; &nbsp;채용 &nbsp; &nbsp;정보 &nbsp;
            &nbsp;도움말 &nbsp; &nbsp; API &nbsp; &nbsp;개인정보처리방침 &nbsp;
            &nbsp;약관 &nbsp; &nbsp;인기 &nbsp; &nbsp; 계정 &nbsp;
            &nbsp;해시태그 &nbsp; &nbsp; 위치
          </p>
          <span>한국어 &nbsp; &nbsp; &copy; 2021 Westagram from Facebook</span>
        </div>
      </div>
    );
  }
}

export default withRouter(Login);

idとpasswordを空の文字列としてstateに指定します.
inputウィンドウでonChangeイベントを実行するとhandeInput関数が実行されます.
inputタグにはnameというプロパティがあり、このプロパティを使用して2つのinputにイベントを提供できます.
を選択します.
name属性値はvalueのようにe.targetをインポートできます.
次に、onSubmitイベントを2つのinputを含むformタグに送信します.
gotoMainという名前の関数を作成しました.
この関数は、this.props.history.push('/main-myung');コードを介してメイン画面を移動する.
有効性チェックは、ボタンの無効化によって実現されます.
disableプロパティ値には、ボタンが無効になっている条件が入力されています.

                      !(
                        this.state.idValue.includes('@') &&
                        this.state.pwValue.length >= 5
                      )
                      

idがfoothで、パスワードが5文字以上の場合、submitは無効になり、許可されます.
メイン画面に移動できます.
1週間の状態が理解できず、全体の反応実行順、流れ順を熟知して使用すると、より使いやすくなります.