H5W3
当前位置:H5W3 > JavaScript > React > 正文

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

如题:
网上查资料了解到可以用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方法。 请问下该如何重置表单和获取表单中的值?

回答

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>
    }

}

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

本文地址:H5W3 » 【React】antd如何在同一个页面使用两个不同Form表单

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址