目前正在學習 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)所以我嘗試了它并得到了一些意想不到的行為。基本上，在創建頁面時，我收到了每個專案已被洗掉三次的警報，然后當我單擊它時什么也沒有發生。為什么會發生這種情況？比如我如何解釋這種行為？為什么需要這個箭頭函式？
uj5u.com熱心網友回復：
如果您只是使用onClick = onDelete(task.id)它，它將呼叫onDelete該組件的每個渲染。您正在將該函式的回傳值傳遞給onClick. 通過使用箭頭函式，您傳遞的是函式本身，這樣當用戶單擊您的 時h3，它就會并且僅在那時呼叫該函式。
注意 -出于可訪問性原因放置onClicks像h3s這樣的元素不是一個好主意。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/404678.html
標籤：
上一篇：進度條在第1步未激活