React从零实现Antd4 Form表单 | 如何基于用户角度构建系统？

2023-09-27 03:05:18

Antd4 Form 表单的基本使用

Antd4 Form 表单的使用非常简单，首先需要在项目中安装 antd 和 @ant-design/icons 两个包：

npm install antd @ant-design/icons

然后在代码中导入 Form 和 Input 等组件：

import { Form, Input } from 'antd';

接下来就可以创建一个表单了：

const App = () => {
  return (
    <Form>
      <Form.Item label="用户名">
        <Input />
      </Form.Item>
      <Form.Item label="密码">
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">登录</Button>
      </Form.Item>
    </Form>
  );
};

export default App;

这个表单包含了两个输入框，分别用于输入用户名和密码。当用户提交表单时，可以获取到输入框中的值。

表单验证

Antd4 Form 表单提供了强大的表单验证功能，可以对输入框中的值进行各种各样的验证，比如必填、长度限制、正则表达式匹配等。

const App = () => {
  return (
    <Form
      onFinish={values => {
        console.log('Received values of form:', values);
      }}
    >
      <Form.Item
        label="用户名"
        name="username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="密码"
        name="password"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">登录</Button>
      </Form.Item>
    </Form>
  );
};

export default App;

在上面的代码中，我们对用户名和密码输入框都添加了 required 规则，这意味着这两个输入框都是必填的。如果用户没有输入用户名或密码，就会收到相应的错误提示。

表单数据仓库

Antd4 Form 表单还提供了表单数据仓库的功能，可以将表单中的数据存储起来，以便在需要的时候使用。

const App = () => {
  const [form] = Form.useForm();

  return (
    <Form form={form} onFinish={values => {
      console.log('Received values of form:', values);
    }}>
      <Form.Item
        label="用户名"
        name="username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="密码"
        name="password"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">登录</Button>
      </Form.Item>
    </Form>
  );
};

export default App;