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
    19 ноя 2021 в 10:32
  • @AntonHPL 1. оба не сработают - это же разные функции. 2. В первом пункте ж сказано, что она не работает.
    – Qwertiy
    19 ноя 2021 в 13:55
  • хорошо, какой вариант рабочий?
    – AntonHPL
    19 ноя 2021 в 14:33
  • @AntonHPL, document.addEventListener("click", handleClick) - этот.
    – Qwertiy
    19 ноя 2021 в 14:46
  • а в чем разница между document.addEventListener("click", handleClick) и document.addEventListener("click", (e) => handleClick(e))? Можете пояснить? До конца не ясно.
    – AntonHPL
    19 ноя 2021 в 14:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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