【原创】react子组件如何调父组件的函数

项目背景：

父组件为项目列表，引入子组件，子组件添加记录，完成请求后需关闭子组件弹框，且更新父组件列表，则需要子组件在发起请求时，不光关闭弹框，还要调用父组件的函数更新列表

实现步骤：

子组件

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();