React：在子组件中调用父组件的函数

Question

我有两个js文件，如下所示：

mainpage.js

import * as React from 'react';
import Filter from '../components/filterPane.js';

export default function MainPage() {
    const handleSubmit = () => {
        alert('inside submit');
    }

    return (
        
            
            

            
                
            
        
      );
}

和 filterPane.js

import * as React from 'react';
import Button from '@mui/material/Button';

export default function ComplexGrid( {handleSubmit}) {

  const submitFilter = () => {
    handleSubmit(); // 调用父组件函数
  };

  return (
       
  );
}

我想在 filterPane.js 中的onclick事件中调用 mainPage.js 中的 handleSubmit() 函数。

当我触发点击事件时，控制台出现错误：Uncaught TypeError: handleSubmit is not a function。

非常感谢任何帮助！

Sasha Chedygov · Answer

在mainpage.js中，您从'../components/filterPane.js'导入Filter；

在filterPane.js中，您将React组件导出为“ComplexGrid”，而不是“Filter”。将导出名称更改为“Filter”。

export default function Filter({handleSubmit}) {

（在mainpage.js中，您还使用了一个

，但缺少相应的导入）

VolkerK · Answer

以下是修正后的代码以及对更改的说明：

mainpage.js:

import * as React from 'react';
import Filter from '../components/filterPane.js'; // 正确的导入路径

export default function MainPage() {
  const handleSubmit = () => {
    alert('inside submit');
  };

  return (
    
      
      

      
         // 将handleSubmit作为属性传递
      
    
  );
}

filterPane.js:

import * as React from 'react';
import Button from '@mui/material/Button';

export default function Filter(props) { // 正确接收props
  const submitFilter = () => {
    props.handleSubmit(); // 通过props访问handleSubmit
  };

  return (
     // 直接传递submitFilter
  );
}

更改说明：

导入路径：mainpage.js中的导入路径不正确。已更正为../components/filterPane.js以匹配文件结构。
属性传递：将handleSubmit函数作为属性从MainPage传递给Filter。这使得Filter能够访问并调用父级函数。
属性访问：在filterPane.js中，正确使用props对象来访问handleSubmit函数。
事件处理：Filter中的onClick处理器直接调用submitFilter。无需将其包裹在另一个匿名函数中。
函数名：将filterPane.js中的组件名从ComplexGrid更改为Filter，以匹配导出名和在mainpage.js中的用法。

经过这些修正后，代码应能编译并运行，不再出现“handleSubmit is not a function”错误，从而允许您从filterPane.js中的onClick事件调用handleSubmit。