ant design 表单的使用

表单中有个重置表单的功能，

这里有两种方式，hook组件和类组件，其本质是获取form的元素。

在hook中获取元素应用方式如下：

 const [form] = Form.useForm();

const onReset = () => {
    form.resetFields();
  };

  const onFill = () => {
    form.setFieldsValue({
      note: 'Hello world!',
      gender: 'male',
    });
  };

 <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>

 

类组件中方式如下：

class Demo extends React.Component {
  formRef = React.createRef();

 onReset = () => {
    this.formRef.current.resetFields();
  };
  onFill = () => {
    this.formRef.current.setFieldsValue({
      note: 'Hello world!',
      gender: 'male',
    });
  };

<Form {...layout} ref={this.formRef} name="control-ref" onFinish={this.onFinish}>
...}

 

主要分为三步：

第一步，定义一个特殊对象来保存form元素

第二步，获取form元素

第三步，调用form元素的方法。

 

至于有何不同，仔细研读上面代码。