antd如何在同一个页面使用两个不同Form表单

Question

如题：
网上查资料了解到可以用ref来实现，但是实现起来一直报错:_this.form2.resetFields is not a function
代码如下

<Form ref={(form)=>this.form1=form}>
   <FormItem label="用户名">
     {
        getFieldDecorator('user',{
           validateTrigger:['onBlur'],
           rules:[
              {
                required:true,
                message:'请输入用户名'
              }
           ]
        })(
          <Input size="large"/>
        )
     }

   </FormItem>
  <FormItem>
    <Button onClick=()=>{this.form1.resetFields();}>重置</Button>
  </FormItem>
</Form>


<Form ref={(form)=>this.form2=form}>
   <FormItem label="用户名">
     {
        getFieldDecorator('user',{
           validateTrigger:['onBlur'],
           rules:[
              {
                required:true,
                message:'请输入用户名'
              }
           ]
        })(
          <Input size="large"/>
        )
     }

   </FormItem>

   <FormItem>
    <Button onClick=()=>{this.form2.resetFields();}>重置</Button>
  </FormItem>

</Form>

调用form2的重置表单方法提示没有这个resetFields方法，查看this.form2确实没有resetFields方法。 请问下该如何重置表单和获取表单中的值？

Answer 1

resetFields这个方法的来源，是antd提供的Form.create(options)这个方法生成的form。
如果页面需要两个form。应该通过Form.create(options)这个方法生成两个form分别操作。

---

答案修改:

class MyFirstForm extends React.Component{


}

class MySecondForm extends React.Component{


}

const Form1 = Form.create(options1)(MyFirstForm)
const Form2 = Form.create(options2)(MySecondForm);

class TwoForm extends React.Component{

    render() {
        <div>
            <Form1></Form1>
            <Form2></Form2>
        </div>
    }

}

Answer 2

@A_大白 我需要在TwoForm里调Form1和Form2的resetFields()方法如何调用？