使用方法:
在组件内定义form
const [form] = Form.useForm();
const clearHandler = () => {
console.log('点击form表单');
// props.form.resetFields();
props.formStatus.resetFields();
console.log(props);
};
return <>
<Form {...layout}
name="nest-messages"
onFinish={onFinish}
onValuesChange={onValuesChange}
className="deepForm"
//要清空form表单必须要在Form标签上增加form属性
form={form}
>
<Form.Item
name={[
"user",
"refNumber"
]}
label="参考数量"
>
<Input />
</Form.Item>
<Button onClick={clearHandler}>清空</Button>
</Form>
</>;
因为我的项目是把form表单是单独的一个组件,模态框包着form表单
所以我需要在模态框的父组件中定义form
父组件内容,下图:
子组件:
可是我这是模态框内的表单,在form表单中添加一个按钮是多余的,模态框有自己的点击按钮,父组件中定义了form表单,所以我们可以在父组件中清空就可以了
注:如果不在antd的form标签上添加form属性的话,那么会报错,而且清空不了form的内容:
Instance created by useForm
is not connected to any Form element. Forget to pass form
prop?
原因:
这是因为在调用 form 方法时,Modal 还未初始化导致 form 没有关联任何 Form 组件。可以通过给 Modal 设置 forceRender 将其预渲染
修改方法: