antd4.0踩坑

1. 搜索框内小图标引入与使用（3.0版本Icon已弃用）

import { Form, Input, Button } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
<Form>
	<Form.Item>
		<Input
			prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.5)' }} />}
			placeholder="用户名"
		/>
		<Input
			prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.5)' }} />}
			type="password"
			placeholder="密码"
			autoComplete="true" // 这行是为了解决控制台的一个警告
		/>
	</Form.Item>
</Form>

2. 表单提交的回调函数（3.0的handleSubmit改成onFinish了）

// 成功的回调
onFinish = (value) => {
    console.log('表单校验成功', value)
}
// 失败的回调
onFinishFailed = (errorInfo) => {
    console.log('表单校验失败', errorInfo)
}
<Form 
	className="login-form" 
	onFinish={this.onFinish}
	onFinishFailed={this.onFinishFailed}
>
<Form.Item>
	<Button type="primary" htmlType="submit" className="login-form-button">
	    登录
	</Button>
</Form.Item>
</Form>

3. 声明式表单验证规则

<Form.Item
    name="username"
    // 声明式验证
    rules={[
        { required: true, whitespace: true, message: '用户名不能为空' },
        { min: 4, message: '用户名至少为4位' },
        { max: 12, message: '用户名不能超过12位' },
        { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名必须由数字、字母、下划线组成' },
    ]}>
    <Input
        prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.5)' }} />}
        placeholder="用户名"
    />
</Form.Item>

4. 自定义表单验证规则

// 自定义密码表单验证（4.0版本需要返回一个promise）
validatePwd = (_, value) => {
    if (!value) {
        return Promise.reject('密码不能为空')
    } else if (value.length < 4) {
        return Promise.reject('密码不能小于4位')
    } else if (value.length > 12) {
        return Promise.reject('密码不能大于12位')
    } else if (!/^[a-zA-Z0-9_]+$/.test(value)) {
        return Promise.reject('密码必须由字母、数字、下划线组成')
    } else {
        return Promise.resolve()
    }
}
<Item
     name="password"
     rules={[{ validator: this.validatePwd, },]}
 >
     <Input
         prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.5)' }} />}
         type="password"
         placeholder="密码"
         autoComplete="true"
     />
 </Item>