ReactJs

Question

目前正在学习 React，我很困惑为什么会这样。我的 App.JS:

import logo from './logo.svg';
import './App.css';
import Header from './components/Header'
import Tasks from './components/Tasks'
import {useState} from 'react'


function App() {
  let name = "Max";
  const [tasks, setTasks] = useState([
    {
        id: 1,
        text: 'Doctors Appointment',
        day: "Feb 5th at 2:30 pm",
        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,
    },
  ])
  const deleteTask = (id) => {
    alert("deleted " + id);
  }
  return (
    <div className="container">
      <Header />
      <Tasks tasks={tasks} onDelete = {deleteTask} />
    </div>
  );
}

export default App;

Tasks.JS 基本上只是将 Task.js 显示为 h3s Task.js:

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(task.id)}/></h3>
            <p>{task.day}</p>

        </div>
    )
}

export default Task

所以我看到了 onClick = () => onDelete(task.id) 的箭头函数并且想知道为什么我不能只做 onClick = onDelete(task.id) 所以我试了一下并得到了一些意想不到的行为。基本上，在创建页面时，我收到了每个项目已被删除三次的警报，然后当我点击它时没有任何反应。为什么会这样？比如我该如何解释这种行为？为什么需要这个箭头函数？

Answer 1

如果您只使用 onClick = onDelete(task.id)，它将在该组件的每个渲染器上调用 onDelete。您正在将 return 从该函数传递给 onClick。通过使用箭头函数，您传递的是函数本身，因此当用户点击您的 h3 时，它只会调用该函数。

注意 - 出于可访问性原因，将 onClicks 放在 h3 等元素上不是一个好主意。

ReactJs - 为什么在没有箭头函数的情况下用括号调用 Delete() 不起作用？

ReactJs - Why does calling onDelete() with parantheses without an arrow function not work?

javascript

web