为什么我在 React JS 中的删除按钮不起作用？

Question

某事我的 onClick 或某事有问题但是当我点击红色删除按钮时，控制台不显示 'delete'，没有宣布错误...任何人都知道错在哪里帮我！粉丝们！

这是我的 Tasks.js:

import React from 'react'
import Task from './Task'

const Tasks = ({tasks, onDelete}) => {
    
    return (
        <div>
         {tasks.map((task)=>(<Task key={task.id} task={task} onDelete={onDelete} /> ))} 
        </div>
    )
}

export default Tasks

这是我的 Task.js:

import React from 'react'
import {FaTimes} from 'react-icons/fa'
const Task = ({task, onDelete}) => {
    return (
        <div className='task'>
           <h3>{task.text} <FaTimes style={{color:'red', cursor:'pointer'}} onClick={onDelete} /></h3>
           <p>{task.day}</p> 
        </div>
    )
}

export default Task

这是我的 App.js:

import React from 'react';
import "./index.css"
import {useState} from 'react'
import Header from "./components/Header";
import Tasks from "./components/Tasks";


  const App = () => {
    const [tasks, setTasks]=useState([
      {
          id:1,
          text:'Doctors Appointment',
          day:'Feb 5th at 2:30pm',
          reminder: true,
      },
      {
          id:2,
          text:'Meeting at School',
          day:'Feb 6th at 1:30pm',
          reminder: true,
      },
      {
          id:3,
          text:'Food Shopping',
          day:'Feb 5th at 2:30pm',
          reminder: false,
      },
    ])
    //delete Task 
    const deleteTask = (id) =>{
      console.log('delete', id)
    }

  return (
<div className="container">
 <Header  />
 <Tasks tasks={tasks} ONDelete={deleteTask}   />
</div>
 )
}

export default App

我的 App.js、Task.js 和 Tasks.js 在我的组件文件夹中，它在我的 src 文件夹中

Answer 1

问题

deleteTask 消耗任务 ID，但 none 被传递给它。

//delete Task 
const deleteTask = (id) => {
  console.log('delete', id)
}

还有一个拼写错误，Tasks 组件采用 onDelete 属性，而不是 ONDelete，因此 onDelete 实际上在后续子项中未定义。

解决方案

将 onDelete 正确传递给 Tasks。

<Tasks tasks={tasks} onDelete={deleteTask} />

点击时，传递一个任务ID。

const Task = ({task, onDelete}) => {
  return (
    <div className='task'>
     <h3>
       {task.text}
       <FaTimes
         style={{ color:'red', cursor:'pointer' }}
         onClick={() => onDelete(task.id)} // <-- pass task id
       />
     </h3>
     <p>{task.day}</p> 
    </div>
  )
}

为什么我在 React JS 中的删除按钮不起作用？

why is my delete button in React JS not working?

onclick

reactjs

问题

解决方案