如何在子 React 组件中调用父函数？

Question

所以我想添加删除按钮，但是当我点击它时我看到错误： 'TypeError: props.onDeleteTask is not a function' - 在组件中 - SingleTask.js

//../components/SingleTask.js
  (...)
  function deleteTask(props){
    const dataId =  props.id;

    props.onDeleteTask(dataId)
  }
(...)
      <div className={classes.delete}>
        <img onClick={deleteTask} src="/delete.png" alt="delete" />
      </div>

///

//../components/AllTask.js
const AllTask = (props) => {

  return (
    <ul className={classes["all-tasks"]}>
      {props.tasks.map((task) => (
        <SingleTask
          key={task.id}
          id={task.id}
          title={task.title}
          priority={task.priority}
          start_date={task.start_date}
          complete={task.complete}
          description={task.description}
          onDeleteTask={props.onDeleteTask}
        />
      ))}
    </ul>

//

//../pages/index.js

function Home(props) {

  async function deleteTaskHandler(enteredTaskData) {
    const response = await fetch("/api/helper", {
      method: "DELETE",
      body: JSON.stringify(enteredTaskData),
      headers: {
        "Content-Type": "application/json",
      },
    });

    const data = await response.json();
    console.log(data);

  }

  return (
    <Fragment>
      <AllTask tasks={props.tasks} onDeleteTask={deleteTaskHandler} />
    </Fragment>
  );
}

////////////////////////////////////////// //////////////////////////////////////////////// //////////////////////////////////////////////// //////////////////////////////////////////////// /

Answer 1

您的“功能”并不是 onDeleteTask 的真正功能您需要调用 function

尝试在 ../components/SingleTask.js 文件中修复此问题

      <div className={classes.delete}>
        <img onClick={() => deleteTask()} src="/delete.png" alt="delete" />
      </div>

我建议你使用 useContext 它可以帮助你更好地使用这些 life cycle components 期货，也可以避免 drilling props.

Answer 2

我认为您的错误是因为 OnClick 事件向该事件的函数发送了 1 个参数。在您的情况下，函数 deleteTask 正在接收事件作为您命名为“props”的参数。您可以使用以下语法解决此问题：

onClick={() => deleteTask()}

或者只是从你的函数声明中删除 params 道具，因为你看起来不像你在使用事件。

function deleteTask(){ ...

Answer 3

您正在将 deleteTask 函数绑定到将点击事件作为参数传递的 onClick。该功能将其作为命名道具获取。所以，道具是属性你正在传递到 SingleTask 组件。

请尝试更改代码部分如下：

//../components/SingleTask.js

  ...
  const {onDeleteTask, id} = props;
  ...
  <div className={classes.delete}>
    <img onClick={() => onDeleteTask(id)} src="/delete.png" alt="delete" />
  </div>

有道理吗？

如何在子 React 组件中调用父函数？

How can I call parent function in a child React component?

reactjs

mongodb

function

next.js