ログインフォームを実装するためのReactサンプルコード

ログインフォームを実装するためのReactサンプルコード

Vue ユーザーとして、React を拡張する時が来ました。antd の導入、less と router の設定から、ようやくシンプルなログイン フォームを実装しました。

コードは次のとおりです。

'react' から React をインポートします。
「antd」から { Input、Button、message } をインポートします。
'@ant-design/icons' から { UserOutlined、LockOutlined、EyeInvisibleOutlined、EyeTwoTone } をインポートします。
'./index.less' をインポートします
クラスLoginはReact.Componentを拡張します{
 コンストラクタ(props) {
 スーパー(小道具)
 この状態 = {
 ユーザー名: ''、
 パスワード: ''
 }
 };
 送信=()=>{
 if (this.state.username !== '' && this.state.password !== '') {
 this.props.history.push('/Index')
 } それ以外 {
 message.error("ユーザー名とパスワードは空にできません")
 }
 };
 ユーザー変更=(e)=>{
 this.setState({
 ユーザー名: e.target.value
 })
 }
 パスワード変更=(e)=>{
 this.setState({
 パスワード: e.target.value
 })
 }
 与える () {
 const {ユーザー名、パスワード} = this.state
 戻る (
 <div className="ログイン">
  <入力
  値={ユーザー名}
  onChange={this.user_change}
  サイズ="大"
  プレースホルダー="ユーザー名"
  プレフィックス={<UserOutlined />}} />
  <パスワードを入力してください
  値={パスワード}
  onChange={this.password_change}
  サイズ="大"
  クラス名="ログイン__入力"
  プレースホルダー="パスワード"
  プレフィックス={<LockOutlined />}
  iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
  />
  <ボタン
  クラス名="login__btn"
  サイズ="大"
  タイプ="プライマリ"
  onClick={this.submit}
  >
  ログイン</Button>
 </div>
 );
 }
}  
デフォルトのログインをエクスポートします。

React でログインフォームを実装するサンプルコードに関するこの記事はこれで終わりです。React ログインフォームに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • react-navigationでユーザーがログインしているかどうかを判断し、ログインページにジャンプする方法
  • react-native ログイン機能を実装するための完全なサンプルコード
  • React Nativeはシンプルなログイン機能を実装します(推奨)
  • Reactはルーティングを使用してログインインターフェースにリダイレクトします

<<:  MySQL のバイナリおよび varbinary データ型の詳細な説明

>>:  Docker で nginx の https を設定する方法

推薦する

Avue でカスタム検索バーを実装し、検索イベントをクリアする実践

目次1. 検索バーの内容をカスタマイズする2. 検索ボタンをカスタマイズする検索バーをカスタマイズし...

DIVマスクを使用して、マウスでチェックボックスを直接チェックすることが無効である問題を解決します

フロントエンドの開発過程で、チェックボックスが必要な状況が発生しました。ユーザー操作の利便性を考慮し...

sshとは何ですか?使い方は?どのような誤解があるのでしょうか?

目次序文SSHとは何かssh は何に使用されますか? sshの使い方ssh 再修正要約する序文ssh...

MySQL シリーズ 14 MySQL 高可用性実装

1. 内閣府マスターノードを監視することで、他のスレーブノードへの自動フェイルオーバーを実現できます...

VMware 15 仮想マシンに Ubuntu 18.04 をインストールするグラフィック チュートリアル

ここ数年、私は自動化とコンピューターを行ったり来たりしてきました。最近は、機械学習に関連するプロジェ...

大規模なウェブサイトアーキテクチャを設計・構築する際に考慮すべき10の課題

ここでは、PHP、JSP、または .NET 環境については説明しません。アーキテクチャの観点から問題...

Vue3 ドキュメント クイックスタート

目次1. セットアップ1. セットアップ関数の最初のパラメータ - props 2. 文脈2. セッ...

Nginx rtmp モジュールのコンパイル ARM バージョンの問題

目次1. 準備: 2. ソースコードのコンパイル1. 設定する2. コンパイルエラー3. ターゲット...

ノードをMySQLデータベースに接続する際に発生する問題と解決策

今日、MySQL の新しいバージョン (8.0.21) をインストールしましたが、ノード フレームワ...

Linux md5sumコマンドの使い方

01. コマンドの概要md5sum - MD5検証コードを計算して検証するmd5sum コマンドは、...

Javascript ファイルと Blob の詳細な説明

目次ファイル()文法パラメータ例ブロブ()文法パラメータ財産方法例要約するファイル() File()...

MySQL テーブルをコピーする 3 つの方法 (要約)

テーブル構造とそのデータをコピーする次のステートメントは、データを新しいテーブルにコピーします。注:...

VMware に CentOS7 をインストールし (静的 IP アドレスを設定)、Docker コンテナ経由で mySql データベースをインストールする (非常に詳細なチュートリアル)

2 年生から、これらのインストールと設定の仕方を尋ねられました。簡単なチュートリアルを作成し、ここ...

Vue は div の高さをドラッグ可能にします

この記事では、divのドラッグ可能な高さを実現するためのVueの具体的なコードを参考までに共有します...

SqlクエリMySqlデータベーステーブル名と説明テーブルフィールド(列)情報

以下では、SQL クエリ ステートメントを使用して、Mysql データベース内のテーブルのテーブル名...