5.1 From元件登入頁面

具有資料收集、校驗和提交功能的表單，包含複選框、單選框、輸入框、下拉選擇框等元素。

文章目錄

• 5.1 From元件登入頁面
• @[toc]
• 一.內聯表單(基礎表單)
• 二.水平表單
• 校驗規則
• API
• Form[#](https://ant.design/components/form-cn/#Form)
• 校驗規則[#](https://ant.design/components/form-cn/#%E6%A0%A1%E9%AA%8C%E8%A7%84%E5%88%99)

import { Form, Icon, Input, Button } from 'antd';

const FormItem = Form.Item;

function hasErrors(fieldsError) {
  return Object.keys(fieldsError).some(field => fieldsError[field]);
}

class HorizontalLoginForm extends React.Component {
  componentDidMount() {
    // To disabled submit button at the beginning.
 

    this.props.form.validateFields();
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }

  render() {
    const { getFieldDecorator, getFieldsError,
 
 getFieldError, isFieldTouched } = this.props.form;

    // Only show error after a field is touched.
    const userNameError = isFieldTouched('userName') && getFieldError('userName');
    const passwordError = isFieldTouched('password') && getFieldError('password');
    return (
      <Form layout="inline" onSubmit={this.handleSubmit}>
        <FormItem
          validateStatus={userNameError ? 'error' : ''}
          help={userNameError || ''}
        >
          {getFieldDecorator('userName', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
          )}
        </FormItem>
        <FormItem
          validateStatus={passwordError ? 'error' : ''}
          help={passwordError || ''}
        >
          {getFieldDecorator('password', {
            rules: [{ required: true, message: 'Please input your Password!' }],
          })(
            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
          )}
        </FormItem>
        <FormItem>
          <Button
            type="primary"
            htmlType="submit"
            disabled={hasErrors(getFieldsError())}
          >
            Log in
          </Button>
        </FormItem>
      </Form>
    );
  }
}

const WrappedHorizontalLoginForm = Form.create()(HorizontalLoginForm);

ReactDOM.render(<WrappedHorizontalLoginForm />, mountNode);

一.內聯表單(基礎表單)

1.Form元件

• 引入Form:import {Form} from “antd”;

• <Form layout="inline"/>行內方式

//src/pages/form/login.js
import React from "react";

import {Button, Card, Form, Input} from "antd";

const FormItem = Form.Item;
export default class FormLogin extends React.Component {
  render() {
    return (
      <div>
        <Card title="登入行內表單">
          <Form layout="inline">
            <FormItem>
              <Input placeholder="請輸入使用者名稱"/>
            </FormItem>
            <FormItem>
              <Input placeholder="請輸入密碼"/>
            </FormItem>
            <FormItem>
              <Button type="primary">登入</Button>
            </FormItem>
          </Form>
        </Card>
      </div>
    )
  }
}

二.水平表單

如何獲取值?

通過antD輔助獲取一些值 , 而不使用e.target.value 的方式,進行設定.

• <div><img src="/carousel-img/carousel-1.jpg" alt=""/></div>

• `<Form layout="horizontal"/>`水平方式
  

• <Form layout="horizontal" style={{width:300}}/> :

  • style={{width:300}}指定表單的寬度

  • getFieldDecorator:幫助進行初始化值,獲取資料

  • getFieldDecorator(‘表單裡的一些物件’,定義的規則和值)(元件)

  {
      getFieldDecorator('userName',{
      initialValue:'Jack',
      rules:[]
      })(
      <Input placeholder="請輸入使用者名稱"/>
      )
  }
  

  在最下方新增

  export default Form.create()(FormLogin);
  

//src/pages/form/login.js
import React from "react";

import {Button, Card, Form, Input} from "antd";

const FormItem = Form.Item;

class FormLogin extends React.Component {
  render() {
    const {getFieldDecorator} = this.props.form;
    return (
      <div>
        <Card title="登入行內表單">
          <Form layout="inline">
            <FormItem>
              <Input placeholder="請輸入使用者名稱"/>
            </FormItem>
            <FormItem>
              <Input placeholder="請輸入密碼"/>
            </FormItem>
            <FormItem>
              <Button type="primary">登入</Button>
            </FormItem>
          </Form>
        </Card>
        <Card title="登入水平表單" style={{marginTop: 10}}>
          <Form layout="horizontal" style={{width: 300}}>
            <FormItem>
              {
                getFieldDecorator('userName', {
                  initialValue: 'Jack',
                  rules: []
                })(
                  <Input placeholder="請輸入使用者名稱"/>
                )
              }

            </FormItem>
            <FormItem>
              {
                getFieldDecorator('userPwd', {
                  initialValue: '123456',
                  rules: []
                })(
                  <Input placeholder="請輸入密碼"/>
                )
              }
            </FormItem>
            <FormItem>
              <Button type="primary">登入</Button>
            </FormItem>
          </Form>
        </Card>
      </div>
    )
  }
}

export default Form.create()(FormLogin);

• 
• rules:規則設定

options.rules校驗規則，參考下方文件 object[]

指定規則 rulue ,required(請求):true message:‘使用者名稱不能為空’

校驗規則

{
    getFieldDecorator('userName', {
        initialValue: 'Jack',
        rules: [{
            required:true,
            message:'使用者名稱不能為空'
        }]
    })(
        <Input placeholder="請輸入使用者名稱"/>
    )
}

• 加入小圖示:
  • prefix:加字首 ,裡面放上圖示
  • <Input prefix={<Icon type="user"/>} placeholder="請輸入使用者名稱"/>
  • 設定記住密碼框預設選中
  • valuePropName:‘checked’,
  • initialValue: true,
  • 通過浮動來控制,a連結向右
  • <a href="#" style={{float:‘right’}}>忘記密碼

<FormItem>
        {
        getFieldDecorator('remember', {
                           valuePropName:'checked',
                           initialValue: true,
                           rules: [{
                           required: true,
                           message: '密碼不能為空'
                           }]
        })(
            <Checkbox>記住密碼</Checkbox>
        )
    }
    <a href="#" style={{float:'right'}}>忘記密碼</a>
</FormItem>

• //src/pages/form/login.js
  import React from "react";
  
  import {Button, Card, Checkbox, Form, Icon, Input, message} from "antd";
  
  const FormItem = Form.Item;
  
  class FormLogin extends React.Component {
    handleSubmit = () => {//繫結提交事件進行校驗
      let userInfo = this.props.form.getFieldsValue();//object物件
      this.props.form.validateFields((err, values) => {
        if (!err) {//全部通過 ${}  是變數
          message.success(`${userInfo.userName} 恭喜你,您通過本次表單元件學習,當前密碼為:${userInfo.userPwd}`)
        }
      });
    }
  
    render() {
      const {getFieldDecorator} = this.props.form;
      return (
        <div>
          <Card title="登入行內表單">
            <Form layout="inline">
              <FormItem>
                <Input placeholder="請輸入使用者名稱"/>
              </FormItem>
              <FormItem>
                <Input placeholder="請輸入密碼"/>
              </FormItem>
              <FormItem>
                <Button type="primary">登入</Button>
              </FormItem>
            </Form>
          </Card>
          <Card title="登入水平表單" style={{marginTop: 10}}>
            <Form layout="horizontal" style={{width: 300}}>
              <FormItem>
                {
                  getFieldDecorator('userName', {
                    initialValue: '',
                    rules: [
                      {
                        required: true,
                        message: '使用者名稱不能為空'
                      },
                      {
                        min: 5, max: 10,
                        message: '長度不在範圍內'
                      },
                      {
                        // pattern: /^\w+$/g,
                        pattern: new RegExp('^\\w+$', 'g'),
                        message: '使用者名稱必須為字母或數字'
                      }
                    ]
                  })(
                    <Input prefix={<Icon type="user"/>} placeholder="請輸入使用者名稱"/>
                  )
                }
  
              </FormItem>
              <FormItem>
                {
                  getFieldDecorator('userPwd', {
                    initialValue: '',
                    rules: [{
                      required: true,
                      message: '密碼不能為空'
                    }]
                  })(
                    <Input prefix={<Icon type="lock"/>} type="password" placeholder="請輸入密碼"/>
                  )
                }
  
              </FormItem>
              <FormItem>
                {
                  getFieldDecorator('remember', {
                    valuePropName:'checked',
                    initialValue: true,
                    rules: [{
                      required: true,
                      message: '密碼不能為空'
                    }]
                  })(
                    <Checkbox>記住密碼</Checkbox>
                  )
                }
                <a href="#" style={{float:'right'}}>忘記密碼</a>
              </FormItem>
              <FormItem>
                <Button type="primary" onClick={this.handleSubmit}>登入</Button>
              </FormItem>
            </Form>
          </Card>
        </div>
      )
    }
  }
  
  export default Form.create()(FormLogin);
  

API

Form#

經過 Form.create 包裝的元件將會自帶 this.props.form 屬性，this.props.form 提供的 API 如下：

注意：使用 getFieldsValue getFieldValue setFieldsValue 等時，應確保對應的 field 已經用 getFieldDecorator 註冊過了。

校驗規則#