0

Почему при одном нажатии на кнопку в компоненте App, useEffect в компоненте NewTask сразу объявляет и вызывает обработчик handleClickOutside? Разве не должно быть так, чтобы первый клик (т.е. первый рендер) только добавлял (навешивал) обработчик handleClickOutside, а уже на второй клик этот обработчик бы вызывался? Объясните, пожалуйста, почему так происходит? Как именно здесь работает React.

function App() {
  const [clicked, setClicked] = React.useState(false);

  return (
    <div>
      <button onClick={() => setClicked(true)}>Click Me</button>

      {clicked && <NewTask clicked={clicked} />}
    </div>
  );
}
function NewTask({ clicked }) {
  React.useEffect(() => {
    const handleOutsideClick = () => {
      console.log("Outside click detected");
    };

    if (clicked) document.addEventListener("click", handleOutsideClick);

    return () => {
      document.removeEventListener("click", handleOutsideClick);
    };
  }, [clicked]);

  return <div>Hello World!</div>;
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>

Codesandbox: https://codesandbox.io/s/mutable-morning-9hs448?file=/src/App.js

1
  • Из того что я вижу, реакт успевает поставить компонент, и позже среагировать на клик. Если поставить через setTimeout задержку установки листнера, то все работает как вы планировали
    – SwaD
    Commented 17 авг. 2023 в 18:50

1 ответ 1

0

Объясните, пожалуйста, почему так происходит? Как именно здесь работает React.

Я добавил к твоему примеру несколько выводов в консоль... Думаю они хорошо проиллюстрируют что там происходит. То, что ты получаешь в итоге, лишь результат "комбинации" всплытия события и работы скрипта.

Рендер компонента NewTask (и собственно навешивание события) происходит раньше чем событие закончит свое всплытие. Потому и срабатывает "сразу".

Если остановить всплытие (e.stopPropagation()) - можно получить нужный тебе эффект...

//
function App() {
  const [clicked, setClicked] = React.useState(false);
  React.useEffect(() => {
    const test = _ => {
      console.log('Клик на документ (завершение всплытия)');
    };
    document.addEventListener("click", test)
    return () => {
      document.removeEventListener("click", test);
    };
  }, []);
  const act = e => {
    // достаточно тут остановить всплытие события
    // e.stopPropagation()
    setClicked(true)
  }
  return (
    <div onClick={_ => console.log('Всплытие')}>
      <button onClick={act}>Click Me</button>

      {clicked && <NewTask clicked={clicked} />}
    </div>
  );
}
//
function NewTask({ clicked }) {
  console.log("Рендер NewTask");
  React.useEffect(() => {
    const handleOutsideClick = () => {
      console.log("Outside click detected");
    };
    if (clicked) {
      console.log("Навешивание события");
      document.addEventListener("click", handleOutsideClick);
    }
    return () => {
      document.removeEventListener("click", handleOutsideClick);
    };
  }, [clicked]);
  return <div>Hello World!</div>;
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>

Ваш ответ

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

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