0%

antd4.0的认识

图标的改进

图标实现了按需加载,体积减少了

1
2
3
4
5
6
7
8

import { SmileOutline } from '@ant-design/icons';
const Demo = () => (
<div>
<SmileOutline />
<Button icon={<SmileOutline />} />
</div>
);

Form组件

Form 将默认聚合表单数据域,你不再需要通过 Form.create() 创建上下文。
Fom.Item 将默认聚合表单字段,你不需要通过 getFieldDecorator 绑定 Field。
Form.Item 的值将总会保留,但是其验证功能只有表单项可见时才会生效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import React, { PureComponent } from 'react';
import { Form, Input,Button } from 'antd';
import { UserOutlined,LockOutlined } from '@ant-design/icons';
import style from './index.less';

class Login extends PureComponent {

onFinish = values => {
console.log(values)
}

render() {
const formItemLayout = {
wrapperCol: {
xs: { span: 24 },
sm: { span: 24 },
},
};
return (<div>
<Form {...formItemLayout} onFinish={this.onFinish} className={style.login}>
<Form.Item name="username" rules={[
{
required: true,
message: '请输入用户名!',
},
]} >
<Input prefix={<UserOutlined/> } />
</Form.Item>
<Form.Item name="password" rules={[
{
required: true,
message: '请输入密码!',
},
]} >
<Input.Password prefix={<LockOutlined/>} />
</Form.Item>
<Form.Item>
<Button type="primary" size="large" htmlType="submit" block>
登录
</Button>
</Form.Item>
</Form>
</div>);
}
}

export default Login;

以后用到了更多功能,持续更新…..

-------------本文结束感谢你的阅读---------