如何使用AntDesign的Form.useForm方法

發(fā)布時(shí)間：2024-06-10 09:28:04 來(lái)源：億速云閱讀：356 作者：小樊欄目：web開(kāi)發(fā)

Ant Design的Form組件提供了一個(gè)useForm方法，用來(lái)獲取一個(gè)form實(shí)例。通過(guò)useForm方法創(chuàng)建的form實(shí)例可以用來(lái)控制表單的校驗(yàn)、字段值的獲取和設(shè)置等操作。以下是使用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;

在上面的示例中，我們通過(guò)調(diào)用Form.useForm()方法獲得一個(gè)form實(shí)例，并將該實(shí)例賦值給form變量。然后我們?cè)贔orm組件中使用form={form}將該form實(shí)例綁定到表單上。這樣我們就可以通過(guò)form實(shí)例來(lái)控制表單的校驗(yàn)、字段值的獲取和設(shè)置等操作。

向AI問(wèn)一下細(xì)節(jié)

如何使用AntDesign的Form.useForm方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽