项目背景:
父组件为项目列表,引入子组件,子组件添加记录,完成请求后需关闭子组件弹框,且更新父组件列表,则需要子组件在发起请求时,不光关闭弹框,还要调用父组件的函数更新列表
实现步骤:
子组件
const PreBook = (props) => {
// 表单提交
const onFinish = (values) => {
let params = values
book(params); //调预约接口
props.submitPre(); //调父组件函数
};
//预约
const book = async (values) => {
try {
const res = await Api.book(values);
if (res.code == 200 && res.data) {
message.success(res.msg)
form.resetFields(); //清空输入框
setIsModalOpen(false); //弹框关闭
} else {
message.error(res.msg)
}
} catch (error) {
console.log(error)
}
}
};
父组件
//重置按钮,清空所有搜索条件,设置页码为第一页
const onReset = () => {
form.resetFields();
pageNum.current = 1;
beginDate.current = '';
list(); //请求列表接口
};
<PreBook submitPre={onReset} />
在父组件中定义一个函数 onReset,并将其作为props传递给子组件。
在子组件中调用该函数,可以使用props来访问它。props.submitPre();