Почему событие при клике в React срабатывает со 2 раза?

Question

[funkydance]

Здравствуйте.

Написал небольшое событие, которое при клике на элемент навешивает классы на несколько других. Всё работает, но если только кликнуть 2 раза на элемент первый раз, а вот потом уже всё с первого раза переключается.

NavigationTr () {
  let bet = document.querySelector(".game__wrap > span");
  let trbutton = document.querySelector(".game-head__tr-navigation");
  let linetr = document.querySelector(".game_info-head");
  let menugame = document.querySelector(".game-head__place-bet");
  let end = document.querySelector(".end__winners");
  trbutton.addEventListener("click", (e) => {
    e.preventDefault();
    end.classList.add("game__tr");
    menugame.classList.add("game-tr");
    bet.classList.add("game-tr");
    bet.classList.add("game__show");
    linetr.classList.add("game__show");
  })
}

На сам элемент навесил эту функцию:

<button onClick={this.NavigationTr} type="button" className={b({ block, elem: "tr-navigation" })}>

Тоже самое и с другими функциями, почему только со 2 раза. Гуглил похожие моменты, но не совсем понял причину.

Comments

[davidnum95]

это что такое вообще? ты доку по реакту читал?

[funkydance]

davidnum95, Нет, так как до реакта не добрался, но кое какой проект под себя нужно было переделать быстро. Опять же повторюсь, для себя. Знаю, что на реакте иначе работают события, но не изучил их. Как то так)

[funkydance]

davidnum95, так что, не ругайтесь) Был бы рад, если бы подсказали как правильнее. Описали бы, как стоит делать на реакте в данном случае. Не прошу переписать код естественно)

[davidnum95]

funkydance, можешь отсюда начать
https://ru.reactjs.org/docs/hello-world.html

Answer 1

[Umesh Singh]

The problem is html related, rather than React related. By default clicking a label will also trigger the onClick event of the input element
https://www.bestinterviewquestion.com/react-native...