Reactを使ってブログサイトを作る 02 - ログインページの構築

ログインページの静的構造の構築

• Ant Designフレームワークの Card と Form コンポーネントを主に使用します。
  参考リンク: https://ant.design/components/form

• Login/index.js にログインページの基本構造を作成します。

• Login ディレクトリ内に index.scss ファイルを作成し、コンポーネントのスタイルを指定します。

---

フォームのバリデーションの実装

• Form コンポーネントに validateTrigger 属性を追加し、バリデーションの発火タイミングを指定します。
• Form.Item コンポーネントに name 属性を追加します。
• Form.Item コンポーネントに rules 属性を追加し、フォームのバリデーションルールを設定します。

---

ログインフォームデータの取得

• Form コンポーネントに onFinish 属性を追加します。このイベントは、ログインボタンをクリックした際に発火します。
• onFinish 関数を作成し、関数の引数 values を通じてフォームの値を取得します。
• Form コンポーネントに initialValues 属性を追加し、フォームの初期値を設定します。

コード

• login/index.js

import './index.scss'
import React from 'react';
import { Card,Button, Checkbox, Form, Input } from 'antd';
const onFinish = (values) => {
console.log('Success:', values);
  };
const onFinishFailed = (errorInfo) => {
console.log('Failed:', errorInfo);
  };
const Login = () => {
return  <div className="login">
<Card
className="login-container"
>
<Form
name="basic"
initialValues={{
remember: true,
    }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
validateTrigger={['onBlur']}
>
<Form.Item
label="Username"
name="username"
rules={[
        {
required: true,
message: 'Please input your username!',
        },
      ]}
>
<Input placeholder= "please input username" />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[
        {
required: true,
message: 'Please input your password!',
        },
      ]}
>
<Input.Password placeholder= "please input password"/>
</Form.Item>
<Form.Item label={null}>
<Button block type="primary" htmlType="submit">
        Log in
</Button>
</Form.Item>
</Form>
</Card>
</div>
  }
export default Login

• login/index.scss

.login {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
.login-container {
width: 440px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 50px rgb(0 0 0 / 10%);
    }
.login-checkbox-label {
color: #1890ff;
    }
  }