如何从 vanilla javascript 获取 React 按钮的点击事件和类名？答案

【问题标题】：How to get React button's click events and class name from vanilla javascript?如何从 vanilla javascript 获取 React 按钮的点击事件和类名？
【发布时间】：2020-04-23 02:27:25
【问题描述】：

我很好奇是否有办法从 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 中，我添加了带有 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 获取事件？

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

【问题讨论】：

标签： javascript html reactjs create-react-app react-dom

【解决方案1】：

您正在尝试将事件侦听器添加到尚未呈现的按钮。即您执行脚本太早了。

所以在你的脚本中使用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

【讨论】：

【解决方案2】：

您的脚本在反应按钮存在之前正在运行。你想在 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;

【讨论】：