Як виправити проблему подвійного кліку в ReactJS

6 Березня 2024 в 23:19 31

Під час роботи зі складними проектами на ReactJS, розробники часто зіштовхуються з різними проблемами. Одна з таких проблем – це несправне реагування на кліки, коли вони мають відбуватися лише раз. У цій статті ми розглянемо причини цієї проблеми та запропонуємо ефективне рішення для її виправлення.

Почнемо з того, що проаналізуємо проблему більш детально. У вихідному коді, який був наданий, ми бачимо компонент React App, який містить два стану: clicked та text. Крім того, використовується функціональний компонент з використанням useState та useEffect хуків.

Проблема полягає в тому, що при кліку на елемент з класом ‘click-btn’, текст додається лише після другого кліку, хоча ми очікуємо, що він додасться відразу після першого кліку.

Існує кілька причин, чому ця проблема виникає. Одна з них – це порядок виконання подій та оновлення стану в React. При кліку на елемент, спочатку виконується оновлення стану clicked, а потім вже функція getLocation виконується через useEffect. Це призводить до того, що текст додається лише після наступного кліку.

Щоб виправити цю проблему, ми можемо внести зміни до логіки нашого коду. Замість того, щоб очікувати наступного кліку для додавання тексту, ми можемо змінити логіку так, щоб текст додавався відразу ж після першого кліку, якщо клас ‘click-btn’ міститься в класі елемента.

Один зі способів вирішення цієї проблеми – це внести зміни до функції getLocation так, щоб вона додавала текст усередині першого кліку, якщо елемент має клас ‘click-btn’. Ми можемо видалити перевірку на clicked у функції onClick, оскільки тепер текст буде додаватися відразу ж після першого кліку, незалежно від стану clicked.

Ось як виглядатиме змінений код:

import React, { useEffect, useState } from "react";
function App() {
  const [text, setText] = useState(null);
  const addText = (word) => {
    setText(word);
  };
  useEffect(() => {
    const getLocation = (e) => {
      const targetClassList = e.target.classList;
      if (targetClassList.contains("click-btn")) {
        addText("Hello World");
      }
    };
    document.addEventListener("click", getLocation);
    return () => {
      document.removeEventListener("click", getLocation);
    };
  }, []);
  return (
    <>
      <div>
        <div>{text ? text : "Any?"}</div>
        <div className="click-btn">
          Click me
        </div>
      </div>
    </>
  );
}
export default App;

import React, { useEffect, useState } from "react";

function App() {

const [text, setText] = useState(null);

const addText = (word) => {

setText(word);

};

useEffect(() => {

const getLocation = (e) => {

const targetClassList = e.target.classList;

if (targetClassList.contains("click-btn")) {

addText("Hello World");

}

};

document.addEventListener("click", getLocation);

return () => {

document.removeEventListener("click", getLocation);

};

}, []);

return (

<div>

Click me

</div>

</>

);

}

export default App;

Після цих змін текст буде додаватися відразу ж після кліку на елемент з класом ‘click-btn’, без необхідності подвійного кліку.

Загалом, вирішення проблеми подвійного кліку в ReactJS вимагає уважного аналізу логіки та порядку виконання подій в компонентах React, а також правильного використання станів та ефектів. Шляхом зміни логіки нашого коду, ми можемо ефективно вирішити цю проблему і поліпшити користувацький досвід наших додатків.