ログインフォームを実装するための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 を設定する方法

推薦する

JavaScript の矢印関数と通常の関数の違いの詳細な説明

この記事では、JavaScriptにおけるアロー関数と通常の関数の違いについて解説します。具体的な内...

MySQL初心者のための基本操作のまとめ

図書館運営クエリ1.SHOW DATABASE; ----すべてのデータベースを照会する2. SHO...

Node.js コンソールで強調表示されたコードを印刷する方法

序文コードを実行してエラーが発生すると、エラーが出力されます。エラーにはスタック情報が含まれており、...

一目でわかる$nextTickの説明

目次1. 機能説明2. 親コンポーネント3. サブコンポーネント NextTick.vue 4なぜ未...

画像の下部の空白部分の問題を解決する

最近のプロジェクトに取り組んでいるとき、下の図に示すように、画像を参照すると常に下部に空白スペースが...

Vue要素ヘッダーにスラッシュを追加するための実装コード

<テンプレート> <div class="アプリコンテナ"&...

dockerfile における ENTRYPOINT と CMD の組み合わせと違い

前回の記事【dockerコンテナのためのdockerfileを詳しく解説】では、dockerfile...

要素の$notifyポイントについての簡単な説明

当初の意図は、element-ui の $notify 通知をコンポーネントにカプセル化することでし...

Ubuntu 20.04 aptの国内ソースを変更する方法

UPD 2020.2.26 現在、Ubuntu 20.04 LTSはまだリリースされていないため、チ...

HTML における水平および垂直の中央揃え方法の詳細な説明 (基礎)

序文馬を書いていたとき、水平方向と垂直方向の中央揃えの方法について、誰もあまり知らなかったと思います...

ウェブページ上でデスクトップ exe プログラムを呼び出す簡単な方法

この記事では主に、Web ページ上でデスクトップ exe プログラムを呼び出す方法を紹介します。 W...

Linux での Docker と portainer の設定方法

1.Docer CEをインストールして使用するこの記事では、CentOS 7 を例に Docker ...

MySQLのユーザー管理とPostgreSQLのユーザー管理の違い

1. MySQL ユーザー管理[例1.1] ローカルMySQLサーバーのテストデータベースにroot...

bashコマンドの使い方の詳細な説明

Linux では、基本的に vi エディタのように「.sh」拡張子を持つテキストの処理と実行を記述す...

Linux ファイル操作でよく使われるコマンドのまとめ

0. 新しい操作: mkdir abc #新しいフォルダを作成 touch abc.sh #新しいフ...