如何在子React組件中呼叫父函式？-有解無憂

所以我想添加洗掉按鈕，但是當我單擊它時，我看到錯誤：'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>
  );
}

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

uj5u.com熱心網友回復：

我相信您的錯誤是因為 OnClick 事件將 1 個引數發送到事件的函式。在您的情況下，函式 deleteTask 將事件作為引數接收，您將其命名為“道具”。您可以使用以下語法解決此問題：

onClick={() => deleteTask()}

或者只是從你的函式宣告中洗掉 params 道具，因為你看起來不像你在使用該事件。

function deleteTask(){ ...

uj5u.com熱心網友回復：

您的“功能”并不是真正的功能，onDeleteTask 您需要呼叫function

嘗試在../components/SingleTask.js檔案中解決此問題

      <div className={classes.delete}>
        <img onClick={() => deleteTask()} src="/delete.png" alt="如何在子 React 組件中呼叫父函式？" />
      </div>

我建議您使用useContext它可以幫助您更好地處理這些life cycle components期貨并避免drilling props.

uj5u.com熱心網友回復：

您正在將 deleteTask 函式系結到onClick將 click 事件作為引數傳遞的函式。該功能將其作為命名道具。因此，該道具是您傳遞給 SingleTask 組件的屬性。

請嘗試更改代碼部分，如下所示：

//../components/SingleTask.js

  ...
  const {onDeleteTask, id} = props;
  ...
  <div className={classes.delete}>
    <img onClick={() => onDeleteTask(id)} src="/delete.png" alt="如何在子 React 組件中呼叫父函式？" />
  </div>

是否有意義？

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/474004.html

標籤：反应 mongodb 功能下一个.js

上一篇：如何進行查詢包括收集的計數和資料

下一篇：帶有多個$or的Mongodb查詢在$and中