如何使用React结合Antd的Form组件高效实现登录功能？

本文共计2252个文字，预计阅读时间需要10分钟。

一、使用React结合Antd实现登录功能，引入所需Antd组件，代码如下：

javascriptimport { Form, Icon, Input, Button, message } from 'antd';

const Login=()=> { // 登录逻辑代码};

export default Login;

一、React 结合 Antd 实现登录功能

引入所需的 Antd 组件，代码如下所示：

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

在 Login.jsx 中，创建一个 Login 组件。当对外暴露组件时，需要使用 Form 组件进行包装，包装 Form 组件生成一个新的组件 Form(Login)，同时新组件会向 Form 组件传递一个强大的对象属性 form，这样就可以取到 Form 表单的值，这也是高阶组件和高阶函数的体现，代码如下所示：

class Login extends Component {} const WrapLogin = Form.create()(Login) export default WrapLogin

在 render 内部去渲染表单时，可以先通过 this.props 去拿到 form 表单，在 form 中取得 getFieldDecorator，用于和表单进行双向绑定。在 getFieldDecorator 中，第一项是表单项对应的 value 值，第二项是配置对象，属性名是特定的一些名称。