如何使用AntDesign的Form.useForm方法

发布时间:2024-06-10 09:28:04 作者:小樊
来源:亿速云 阅读:335

Ant Design的Form组件提供了一个useForm方法,用来获取一个form实例。通过useForm方法创建的form实例可以用来控制表单的校验、字段值的获取和设置等操作。以下是使用Ant Design的Form.useForm方法的示例代码:

import { Form, Input, Button } from 'antd';

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

  const onFinish = (values) => {
    console.log('Received values:', values);
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="name" label="Name" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item name="email" label="Email" rules={[{ required: true, type: 'email' }]}>
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default MyForm;

在上面的示例中,我们通过调用Form.useForm()方法获得一个form实例,并将该实例赋值给form变量。然后我们在Form组件中使用form={form}将该form实例绑定到表单上。这样我们就可以通过form实例来控制表单的校验、字段值的获取和设置等操作。

推荐阅读:
  1. 怎么使用纯CSS仿AntDesign的Logo彩蛋效果
  2. vue在antDesign框架或elementUI框架组件native事件中触发问题怎么解决

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

antdesign

上一篇:Electron中的性能优化有哪些方法

下一篇:Electron中的插件系统如何设计和实现

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》