使用Ant Design 的form组件进行表单检验

最新推荐文章于 2024-08-11 08:15:00 发布

wengqt

最新推荐文章于 2024-08-11 08:15:00 发布

阅读量6.1k

点赞数

分类专栏：智库项目前端开发 js React 文章标签： js React Ant Design

本文链接：https://blog.csdn.net/wengqt/article/details/80173820

版权

本文探讨了在React应用中使用Ant Design的form组件进行表单验证的方法。尽管初始代码可能显得复杂，但表单提供了自动数据收集和验证功能，简化了数据处理流程。getFieldDecorator用于双向绑定输入元素，rules则用于设定验证规则。通过validateFields()方法在表单提交时获取已验证的值。使用Ant Design表单的关键在于正确实例化和注册表单。

摘要由CSDN通过智能技术生成

对于一个后台管理系统来说，出现最为频繁的就是表单，在登录的时候、查询的时候都需要提交表单。那么，使用了Ant Design框架的form表单要如何提交呢？

当我们打开Ant Design官网，打开表单的Demo的时候，发现代码怎么会那么多，又臭又长，比自己平时不用框架时候的表单写起来还麻烦。

下面是官网上的一个简单的登录框的例子（可以看到代码是真的长）。那么长的代码真的有用吗？

import { Form, Icon, Input, Button, Checkbox } from 'antd';
const FormItem = Form.Item;

class NormalLoginForm extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        <FormItem>
          {getFieldDecorator('userName', {
            rules: [{ required: true, message: