如何使用AntDesign的Form.Item組件的name屬性

發(fā)布時(shí)間：2024-06-10 13:16:03 來源：億速云閱讀：241 作者：小樊欄目：web開發(fā)

AntDesign的Form.Item組件的name屬性用于指定表單字段的名稱，以便在提交表單時(shí)能夠正確地獲取表單數(shù)據(jù)。

要使用Form.Item組件的name屬性，首先在Form.Item組件中設(shè)置name屬性，并將其設(shè)置為表單字段的名稱，例如：

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

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

  return (
    <Form
      name="myForm"
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
    >
      <Form.Item
        label="Username"
        name="username"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default MyForm;

在上面的例子中，F(xiàn)orm.Item組件的name屬性設(shè)置為"username"，并且在onFinish回調(diào)函數(shù)中可以通過values.username獲取到表單字段“username”的值。

通過設(shè)置Form.Item組件的name屬性，可以方便地管理和處理表單數(shù)據(jù)。

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

如何使用AntDesign的Form.Item組件的name屬性

猜你喜歡

最新資訊

相關(guān)推薦

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