Мне интересно, есть ли способ получить события нажатия React и кнопки className от vanilla JS в теге сценария index.html?

Итак, вот мой index.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);
};

И в App.js моего React я добавил кнопку с названием «click-button» для className ... Но когда я нажимаю на кнопку, это ничего не делает.

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

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

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

    </div>
  );
}

export default App;

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

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

0
jamesharvey 23 Апр 2020 в 05:27

2 ответа

Лучший ответ

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

Так что используйте 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 обязательно используйте defer

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

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

1
gdh 23 Апр 2020 в 03:00

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

Оберните код в 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;

1
Joshua Rose 23 Апр 2020 в 02:52