ログイン機能の実装

ログイン成功時画面。

ログイン失敗時の画面

ログインページを実装すると、「ログイン」ボタンが開いています
1.ID入力ウィンドウに「@」を含める必要があります.
2.Passwordの長さは5個以上でなければなりません.
3.私が指定したIDとパスワードは正しくなければなりません(直接実施してください)
--ログインが許可されている機能のみ

私が書いたコード

import React from 'react';
import { withRouter } from 'react-router';
import './Login.scss';
import '../../../styles/common.scss';

class Login extends React.Component {
  state = {
    id: '',
    password: '',
    offButton: false,
  };

  handleIdInput = e => {
    this.setState({
      id: e.target.value,
    });
  };

  handlePasswordInput = e => {
    this.setState({
      password: e.target.value,
    });
  };

  goToMain = e => {
    const { id, password } = this.state;
    e.preventDefault();
    {id === '[email protected]' && password === 'tkdas6708@'
      ? this.props.history.push('/Main-SangCheol')
      : alert('아이디와 비밀번호를 확인해주세요');
  };

  handleInputText = e => {
    const { id, password } = this.state;
    const isButtonActive = id.includes('@') && password.length >= 5;
    this.setState({ offButton : isButtonActive });
  };

  render() {
  const { offButton } = this.state
    return (
      <div className=" sangcheol-Login">
        <section className="section">
          <div className="inner">
            <h1 className="logo-text">Westagram</h1>
            <form onChange={this.handleInputText} className="input-box">
              <input
                type="text"
                placeholder="전화번호, 사용자 이름 또는 이메일"
                className="input-box_login"
                onChange={this.handleIdInput}
              />
              <input
                type="password"
                placeholder="비밀번호"
                className="input-box_password"
                onChange={this.handlePasswordInput}
              />
              <button
                className={offButton ? 'btnOn' : 'offButton'}
                onClick={this.goToMain}
              >
                로그인
              </button>
              <a className="footer_link" href="Null">
                비밀번호를 잊으셨나요 ?
              </a>
            </form>
          </div>
        </section>
      </div>
    );
  }
}

export default withRouter(Login);

コード解釈

まずformtagには2つの入力があります
1.idを入力
2.パスワードの入力
3.ログインボタン
入力ごとにonChangeを行うと、実行する関数handleIdInputとhandlePasswordInputをpropsに入れます.
その後、ボタンにonClickが表示されると、goTomain関数で実行されます.

関数の動作

handleIdInput関数入力idの入力中にonChangeイベントが発生した場合(テキストが入力された場合)
stateが再ロードされるにつれて、テキストに入力した値
state内部のidキー値に入ります.

handlePasswordInput関数にも上記と同じpassword入力値が入力されると、ステータスは再ロードされ、私が入力したテキストはステータス内部のpasswordキー値に入ります.

goToMain関数は、フォームタグにsubmitが発生したときに機能する関数であり、まずステータス値を構造分解割り当てとして受信し、submitのデフォルト動作のリフレッシュを阻止する.(e.preventDefalut())
その後、idとpasswordに入力した値が私が指定した値と一致する場合は、ルータを使用してMainFeedページに移動します.

ただし、ボタンの3つの演算子としてクラスを使用し、stateの値がfalseの場合、offButtonクラスはボタンがアクティブにならないため色がありません.
ステータス値がtrueに変更された場合、ボタンはアクティブになります.
ステータス値をtrueに変更するためにonchangeがフォーム上でアクションを実行する場合、handleInputText関数はこのアクションを実行し、この関数の役割は次のとおりです.
stateは構造分解割当として受信し、変数isButtonActiveで
idには「@」が含まれており、password長が5より大きい場合、変数は真である.
state内部のoffButtonキー値をisButtonActive(true)に入れます.