React共享单车后台管理系统开发（记录笔记5）——5.1 From组件登录页面

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35812380/article/details/84638669

5.1 From组件登录页面

具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。

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:‘用户名不能为空’

校验规则

参数	说明	类型
options.rules	校验规则，参考下方文档(支持正则表达式)	object[] 数组(可以制定很多规则)
required	是否必选	boolean
max	最大长度	number
min	最小长度	number
pattern	正则表达式校验	RegExp

{
    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#

参数	说明	类型	默认值
layout	表单布局	‘horizontal’|‘vertical’|‘inline’	‘horizontal’

---

经过 Form.create 包装的组件将会自带 this.props.form 属性，this.props.form 提供的 API 如下：

注意：使用 getFieldsValue getFieldValue setFieldsValue 等时，应确保对应的 field 已经用 getFieldDecorator 注册过了。

方法	说明	类型
getFieldDecorator	用于和表单进行双向绑定，详见下方描述
getFieldError	获取某个输入控件的 Error	Function(name)
getFieldsError	获取一组输入控件的 Error ，如不传入参数，则获取全部组件的 Error	Function([names: string[]])
getFieldsValue	获取一组输入控件的值，如不传入参数，则获取全部组件的值	Function([fieldNames: string[]])
getFieldValue	获取一个输入控件的值	Function(fieldName: string)

校验规则#

参数	说明	类型
options.rules	校验规则，参考下方文档(支持正则表达式)	object[] 数组(可以制定很多规则)
max	最大长度	number
min	最小长度	number
pattern	正则表达式校验	RegExp
len	字段长度	number
required	是否必选	boolean
type	内建校验类型，可选项	string