antd From组件使用方法总结（提交时获取所有item值）

一路向阳~负责的男人

已于 2024-03-22 09:42:23 修改

阅读量1k

点赞数 1

文章标签：前端 javascript vue.js

于 2022-12-24 22:27:23 首次发布

本文链接：https://blog.csdn.net/weixin_43416349/article/details/128432040

版权

本文介绍了Ant Design ProFormDependency组件的使用方法，重点讨论了如何利用它进行表单依赖和回调函数处理。同时，文章提到了表单验证的两种方式：一种是通过HTML的`<Button htmlType=submit>`触发原生提交逻辑，另一种是通过创建表单Action手动触发验证。还提醒了读者`required`属性不会触发校验，必须使用`rules`来设置验证规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

FormDependency 用法

aaa, bbb 是 from.item 里 name = name , name = address的值 formValue 是整个表单其他form.item 的值，数据结构是 { name: aaa, adress:bbb }

在 ProFormDependency 组件下，接收一个回调函数，回调函数的参数是

<ProFormDependency<any> name={[name , address] as any}>

{(formValue: any) => {

/**

* 一组查询条件分为keyField, operator, value三部分

*/

const aaa = formValue[name]

const bbb = formValue[address]

------------

！！！ 2个月没写Form，被 <Form.Item required={true} 被 required={true} 坑了，这个是不会触发校验的。

这有 rules才会触发校验。

<Form.Item rules={[ {

required: true,

message: '请输入字段名称',

}, ]}

--------------------

方法一：

通过用 <Button htmlType="submit" /> 调用 web 原生提交逻辑。 从而触发 Form表单的API。

import React from 'react';
import './index.css';
import { Button, Form, Input, message, Space } from 'antd';

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

  const onFinish = () => {
    message.success('Submit success!');
  };

  const onFinishFailed = () => {
    message.error('Submit failed!');
  };

  const onFill = () => {
    form.setFieldsValue({
      url: 'https://taobao.com/',
    });
  };

  return (
    <Form
      form={form}
      layout="vertical"
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        name="url"
        label="URL"
        rules={[{ required: true }, { type: 'url', warningOnly: true }, { type: 'string', min: 6 }]}
      >
        <Input placeholder="input placeholder" />
      </Form.Item>

 // <Form.Item>    //我屏蔽了form.item，证明htmlType="submit" 只要再form组件里面就能生效
        <Space>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
          <Button htmlType="button" onClick={onFill}>
            Fill
          </Button>
        </Space>
 // </Form.Item>

    </Form>
  );
};

export default App;

方法二：（推荐）

通过创建表单的Action来操作

const [form] = Form.useForm();

const handleSubmit = async () => {

const values = await form.validateFields()

}

通过这样去触发校验。

<Form

form={form}

...prop

</Form>