0

В чем разница между

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>
    );
}

1 ответ 1

0
  1. Чтобы убрать обработчик надо передать именно его, а не что-то другое, как у тебя в коде.
  2. Ещё и пустого массива зависимостей не хватает и новый обработчик добавляется на каждый рендер.
9
  • 1) т е если я передаю document.addEventListener("click", (e) => handleClick(e)); то document.removeEventListener("click", handleClick); не сработает, а сработает document.removeEventListener("click", (e) => handleClick(e)); ? 2) почему новый обработчик добавляется, функция очистки же есть
    – AntonHPL
    Commented 19 нояб. 2021 в 10:32
  • @AntonHPL 1. оба не сработают - это же разные функции. 2. В первом пункте ж сказано, что она не работает.
    – Qwertiy
    Commented 19 нояб. 2021 в 13:55
  • хорошо, какой вариант рабочий?
    – AntonHPL
    Commented 19 нояб. 2021 в 14:33
  • @AntonHPL, document.addEventListener("click", handleClick) - этот.
    – Qwertiy
    Commented 19 нояб. 2021 в 14:46
  • а в чем разница между document.addEventListener("click", handleClick) и document.addEventListener("click", (e) => handleClick(e))? Можете пояснить? До конца не ясно.
    – AntonHPL
    Commented 19 нояб. 2021 в 14:47

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.