Ant Design 版本 4 的表单可以使用 Form 组件来创建。以下是一个示例代码,展示了如何使用 Form 来创建一个包含输入框和提交按钮的表单。
import React from "react";
import { Form, Input, Button } from "antd";
const DemoForm = () => {
const onFinish = (values) => {
console.log("Form values:", values);
};
return (
);
};
export default DemoForm;
在上面的代码中,我们首先引入了 Form、Input 和 Button 组件。然后,我们创建了一个 DemoForm 组件,其中包含了一个 Form 组件。Form 的 onFinish 属性指定了表单提交时的回调函数。
接下来,我们通过 Form.Item 组件来创建表单项。每个表单项都有一个 label 属性和一个 name 属性,用于标识该表单项的名称和标签。Form.Item 的 rules 属性可以用来指定验证规则,如必填项等。在示例中,我们使用了 required: true 规则来指定用户名和密码为必填项。
对于输入框,我们使用了 Input 组件。对于密码输入框,我们使用了 Input.Password 组件,以便隐藏输入的内容。
最后,我们使用了 Button 组件作为提交按钮,并设置了 htmlType="submit",以便在点击按钮时触发表单提交。
在表单提交时,onFinish 回调函数将被调用,并且会接收到表单的值作为参数。在示例中,我们简单地将表单的值打印到控制台上。
以上就是使用 Ant Design 版本 4 创建表单的一个示例代码。你可以根据自己的需求进行修改和扩展。