Ant Design 组件 —— Form表单（一）

前端

2023-12-13 00:59:35

前言

Ant Design 是蚂蚁金服开源的前端UI框架，在企业级Web应用开发中有着广泛的应用。Form表单是Ant Design中一个重要的组件，它可以帮助我们快速构建出各种各样的表单。

Form表单简介

Form表单组件是一个高阶函数，它接受一个React组件作为参数，并返回一个新的React组件。这个新组件具有表单验证、表单校验、表单提交、表单数据和表单元素等功能。

基本用法

使用Form表单组件非常简单，只需按照以下步骤操作即可：

导入Form表单组件

import { Form } from 'antd';

定义一个React组件，并将它作为参数传入Form表单组件

const MyForm = Form.create()(class extends React.Component {
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form>
        <Form.Item label="用户名">
          {getFieldDecorator('username')(
            <Input placeholder="请输入用户名" />
          )}
        </Form.Item>
        <Form.Item label="密码">
          {getFieldDecorator('password')(
            <Input type="password" placeholder="请输入密码" />
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">登录</Button>
        </Form.Item>
      </Form>
    );
  }
});

在父组件中使用MyForm组件

render() {
  return (
    <MyForm />
  );
}

表单验证

Form表单组件提供了强大的表单验证功能，可以帮助我们轻松地对表单数据进行验证。

const MyForm = Form.create()(class extends React.Component {
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form>
        <Form.Item label="用户名">
          {getFieldDecorator('username', {
            rules: [{ required: true, message: '请输入用户名' }],
          })(
            <Input placeholder="请输入用户名" />
          )}
        </Form.Item>
        <Form.Item label="密码">
          {getFieldDecorator('password', {
            rules: [{ required: true, message: '请输入密码' }],
          })(
            <Input type="password" placeholder="请输入密码" />
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">登录</Button>
        </Form.Item>
      </Form>
    );
  }
});

表单校验

Form表单组件还提供了表单校验功能，可以帮助我们对表单数据进行校验。

const MyForm = Form.create()(class extends React.Component {
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form>
        <Form.Item label="用户名">
          {getFieldDecorator('username', {
            rules: [{ required: true, message: '请输入用户名' }],
          })(
            <Input placeholder="请输入用户名" />
          )}
        </Form.Item>
        <Form.Item label="密码">
          {getFieldDecorator('password', {
            rules: [{ required: true, message: '请输入密码' }],
          })(
            <Input type="password" placeholder="请输入密码" />
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">登录</Button>
        </Form.Item>
      </Form>
    );
  }
});

MyForm.propTypes = {
  form: PropTypes.object,
};

const WrappedMyForm = Form.create()(MyForm);

表单提交

Form表单组件提供了表单提交功能，可以帮助我们轻松地将表单数据提交到服务器。

const MyForm = Form.create()(class 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}>
        <Form.Item label="用户名">
          {getFieldDecorator('username', {
            rules: [{ required: true, message: '请输入用户名' }],
          })(
            <Input placeholder="请输入用户名" />
          )}
        </Form.Item>
        <Form.Item label="密码">
          {getFieldDecorator('password', {
            rules: [{ required: true, message: '请输入密码' }],
          })(
            <Input type="password" placeholder="请输入密码" />
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">登录</Button>
        </Form.Item>
      </Form>
    );
  }
});

表单数据

Form表单组件提供了表单数据功能，可以帮助我们轻松地获取和设置表单数据。

const MyForm = Form.create()(class 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}>
        <Form.Item label="用户名">
          {getFieldDecorator('username', {
            rules: [{ required: true, message: '请输入用户名' }],
          })(
            <Input placeholder="请输入用户名" />
          )}
        </Form.Item>
        <Form.Item label="密码">
          {getFieldDecorator('password', {
            rules: [{ required: true, message: '请输入密码' }],
          })(
            <Input type="password" placeholder="请输入密码" />
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">登录</Button>
        </Form.Item>
      </Form>
    );
  }
});

const WrappedMyForm = Form.create()(MyForm);

class App extends React.Component {
  state = {
    formData: {},
  };

  handleFormChange = (changedFields) => {
    this.setState({
      formData: { ...this.state.formData, ...changedFields },
    });
  };

  render() {
    return (
      <WrappedMyForm onChange={this.handleFormChange} />
    );
  }
}