React, code refactoring

4350 ワード
React テキストリンク
Westagram Codeのコメントを受けて再パッケージしました.
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin flex-spaceBetween-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
scss変数の設定は一般的です.変数としてscssファイルに移動して使用します.
onChangeHandler = e => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }
既存の2つのinputラベルはそれぞれonchageを受信し、nameプロパティと[]を使用します.
関数としてonChangeHandlerを使用します.
次に、矢印関数を使用します.bind(this)で関数を処理する必要はありません.
handleValidation = () => {
    const isInputValid =
      this.state.id.includes("@") && this.state.pw.length > 5;
    this.setState({ btnState: isInputValid ? "btnOn" : "btnOff" });
  };
IDとPW Inputを確認し、ログインボタンの色のコードを変更します.
最初にstyleプロパティのbackgroundColorを直接変更しました.
ダイナミックにclassNameを使用して再包装しました.
outer
JavaScriptの学習[11.Async、Await処理Promisを使用する]