Как получить события нажатия кнопки React и имя класса от vanilla javascript? - PullRequest
Новая
       39

Как получить события нажатия кнопки React и имя класса от vanilla javascript?

0 голосов
/ 23 апреля 2020

Мне любопытно, есть ли способ получить события нажатия React и кнопки className из ванили JS в индексе. html тег script?

Так вот мой индекс . html файл из приложения create-реагировать. Я добавил свой ванильный код JS в тег скрипта. 

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    <script src="myscript.js"></script>
  </body>

и вот myscript. js

var myBtn = document.getElementsByClassName("click-button");
var alertNow = function() {
   alert('hello world')
}
for (var i = 0; i < myBtn.length; i++) {
    myBtn[i].addEventListener('click', alertNow, false);
};

и внутри приложения моего React. js, я добавил кнопку с className 'click-button' ... Но когда я нажимаю на кнопку, она не ' ничего не делать. 

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">

      <button className="click-button">Click Me</button>

    </div>
  );
}

export default App;

Как я могу заставить эту работу? Тег сценария хорошо работает, когда я использую его в простом html проекте ... но похоже, что он не может получать события от React?

Буду признателен за любой совет!

Ответы [ 2 ]

1 голос
/ 23 апреля 2020

Вы пытаетесь добавить прослушиватели событий к кнопке, которая еще не отображается. т.е. вы выполняете ваш скрипт слишком рано.

Так что используйте load в вашем скрипте 

window.addEventListener("load", () => {
  var myBtn = document.getElementsByClassName("click-button");
  var alertNow = function() {
    alert("hello world");
  };
  for (var i = 0; i < myBtn.length; i++) {
    myBtn[i].addEventListener("click", alertNow, false);
  }
});

Также в вашем html, обязательно используйте отложено 

...
<script defer src="myscript.js"></script>
...

См. Рабочая демонстрация

1 голос
/ 23 апреля 2020

Ваш скрипт запущен до того, как кнопка реакции существует. Вы хотите вызвать ваш скрипт после того, как реакция завершена, он первый рендер

Оберните код в myscript функцией, затем вызовите ее в хуке useEffect.

myscript.js

function run() {
var myBtn = document.getElementsByClassName("click-button");
var alertNow = function() {
   alert('hello world')
}
for (var i = 0; i < myBtn.length; i++) {
    myBtn[i].addEventListener('click', alertNow, false);
};
}

app.js

import React, {useEffect} from 'react';
import './App.css';

function App() {
useEffect(()=>{
// call the function from myscript
run()
},[])
  return (
    <div className="App">

      <button className="click-button">Click Me</button>

    </div>
  );
}

export default App;
...