Javascript Reaction：从子组件调用父组件中的函数

以下是更正后的代码，以及对更改的解释:

mainpage.js:

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

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

  return (
    <div>
      <Header />
      <br />
      <div className='rowC'>
        <Filter handleSubmit={handleSubmit} /> // Pass handleSubmit as a prop
      </div>
    </div>
  );
}

filterPane.js:个

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

export default function Filter(props) { // Receive props correctly
  const submitFilter = () => {
    props.handleSubmit(); // Access handleSubmit from props
  };

  return (
    <Button variant="contained" onClick={submitFilter}>Submit</Button> // Pass submitFilter directly
  );
}

Explanation of changes:个

• 导入路径:mainpage.js中的导入路径不正确.它是 更正为../Components/filterPane.js以匹配文件 struct .
• props 钻取:handleSubmit函数作为props 从 要筛选的主页.这允许筛选器访问和调用父级 功能.
• Prop访问:在filterPane.js中，props对象被正确地用于 访问"提交"功能.
• 事件处理:Filter中的onClick处理程序直接调用 SubmitFilter.没有必要把它包装在另一个匿名的 功能.
• 函数名称:将filterPane.js中的组件名称从 要筛选以匹配其中的导出名称和用法的ComplexGrid Mainpage.js.
• 使用这些更正，代码编译和运行时应不使用 "handleSubmit is not a Function"错误，允许您调用 来自filterPane.js中的onClick事件的handleSubmit.