В чем разница между
document.addEventListener("click", (e) => handleClick(e));
и
document.addEventListener("click", handleClick);
В первом случае в консоль выводится:
Во втором случае:
То есть в два раза меньше.
import React, {useState, useEffect} from 'react'
import TodoList from './TodoList'
export default function App () {
const [todos, setTodos] = useState([]);
const [todoTitle, setTodoTitle] = useState("");
const [changed, setChanged] = useState(false);
const handleClick = (e) => console.log("click", e.target);
useEffect(() => {
const raw = localStorage.getItem("todos") || JSON.stringify([]);
setTodos(JSON.parse(raw));
}, []);
useEffect(() => {
document.addEventListener("click", (e) => handleClick(e));
localStorage.setItem("todos", JSON.stringify(todos));
return () => {
document.removeEventListener("click", handleClick);
}
})
const addTodo = event => {
if (event.key === "Enter") {
setTodos([
...todos,
{
id: Date.now(),
title: todoTitle,
completed: false
}
])
setTodoTitle("");
}
}
return (
<div className="container">
<h1>Todo app</h1>
<div className="input-field">
<input
type="text"
value={todoTitle}
onChange={e => setTodoTitle(e.target.value)}
onKeyPress={addTodo}
/>
<label>Todo name</label>
</div>
<TodoList todos={todos} />
<button onClick = {() => setChanged(!changed)}>button</button>
</div>
);
}