Bolehkah komponen kanak-kanak menghantar fungsi dengan parameter id kepada komponen induk?

Question

Adakah mungkin untuk menghantar fungsi dengan parameter id daripada komponen anak kepada komponen induk menggunakan React? Saya cuba menyampaikan fungsi sebagai prop kepada komponen induknya. Penyelesaian komponen ialah komponen Apl-> komponen TasksList-> Jadi saya perlu menghala ke tugas tertentu dengan mengklik padanya dan menggunakan ID individunya. Intinya, apabila url diklik dan dihalakan ke tugasan, ia berubah kepada /task/009, tetapi komponen tugas tidak dipaparkan.

https://codesandbox.io/s/test-login-page-tasks-rmfn5j?file=/src/components/Taskslist.js

//App component
const Tasks = [
  {
    id: "001",
    status: 0,
    priority: 2,
    title: "Develop website homepage",
    description:
      "Create a visually appealing and responsive homepage for the website",
    schedule: {
      creation_time: "2021-07-23T10:00:00"
    },
    author_name: "John Smith"
  },
  {
    id: "002",
    status: 1,
    priority: 1,
    title: "Implement user authentication",
    description: "Add user authentication feature to the website",
    schedule: {
      creation_time: "2021-07-24T14:30:00"
    },
    author_name: "Sarah Lee"
  }
  ]
  
  function App() {
  const [tasks, setTasks] = useState(Tasks);
  return (
  
    <Route path="/taskslist">
      <Taskslist Tasks={tasks} />
    </Route>
  )

// Parent component
import React from "react";

const Taskslist = ({ Tasks }) => {
  const history = useHistory();

  const goToTask = (taskId) => {
    history.push(`/task/${taskId}`);
  };

  return (
    <Task
      Tasks={Tasks.filter((task) => task.status === 0)}
      goToTask={goToTask}
    />
}

//Child component

import React from "react";

const Task = ({ Tasks, goToTask }) => {
  return (
    <div className="wrapper">
      {Tasks.map((task) => (
        <div key={task.id} onClick={goToTask(task.id)}>
          <h3>{task.title}</h3>
        </div>
      ))}
    </div>
  );
};

export default Task;

Answer 1

Pelbagai soalan

1. Baris ini adalah tempat saya dapat melihat isu pertama. Anda sedang menghubungi goToTask dengan segera.

2. Dalam komponen aplikasi anda, anda tidak memberikan komponen tugasan untuk laluan tugas individu. Untuk menyelesaikan masalah ini, anda boleh menentukan laluan untuk satu tugasan dalam komponen aplikasi dan menjadikan komponen tugasan untuk laluan itu, seperti ini:

function App() {
  const [tasks, setTasks] = useState(Tasks);

  return (
    
      
        
          
        
        
          
        
      
    
  );
}

3. di Task 组件中，您需要确保从 URL 中过滤所选任务。使用 useParams()

import { useParams } from "react-router";

const Task = ({ Tasks }) => {
  const { id } = useParams();
  const task = Tasks.find((task) => task.id === id);

  return (
    

      
{task.title}
      
{task.description}
      {/* ... */}
    
  );
};

Beritahu saya jika saya memerlukan bantuan lanjut.