如何从 vanilla javascript 获取 React 按钮的点击事件和 class 名称？

Question

我很好奇是否有办法在 index.html 脚本标签中从 vanilla JS 获取 React 的点击事件和按钮类名？

所以这是我来自 create-react-app 的 index.html 文件。我在脚本标签中添加了我的原始 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 的 App.js 中，我添加了带有类名 '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 获取事件？

如有任何建议，我将不胜感激！

Answer 1

您的脚本运行在反应按钮存在之前。你想在 React 完成第一次渲染后调用你的脚本。

用一个函数包装 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;

Answer 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>
...

见Working demo

如何从 vanilla javascript 获取 React 按钮的点击事件和 class 名称？

How to get React button's click events and class name from vanilla javascript?

html

javascript

reactjs

react-dom

create-react-app