如何获取反应按钮'；s单击vanilla javascript中的事件和类名？_Javascript_Html_Reactjs_Create React App_React Dom

如何获取反应按钮'；s单击vanilla javascript中的事件和类名？

javascript html reactjs

如何获取反应按钮'；s单击vanilla javascript中的事件和类名？,javascript,html,reactjs,create-react-app,react-dom,Javascript,Html,Reactjs,Create React App,React Dom,我很好奇是否有办法从index.html脚本标记中的vanilla JS获取React的点击事件和按钮类名这是我的createreact应用程序中的index.html文件。我已经在脚本标签中添加了我的香草JS代码 <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div>

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

这是我的createreact应用程序中的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>


您需要启用JavaScript才能运行此应用程序。

这里是myscript.js

var myBtn=document.getElementsByClassName（“单击按钮”）；
var alertNow=function（）{
警报（“你好，世界”）
}
对于（变量i=0；i


在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;


从“React”导入React；
导入“/App.css”；
函数App（）{
返回(
点击我
);
}
导出默认应用程序；

我怎样才能做到这一点？当我在纯html项目中使用脚本标记时，它工作得很好。。但看起来它无法从React中获取事件
如果有任何建议，我将不胜感激
 您的脚本在react按钮存在之前运行。您希望在react完成第一次渲染后调用脚本
使用函数将代码包装在myscript
中，然后在useffect
hook中调用该函数
myscript.js

函数运行（）{
var myBtn=document.getElementsByClassName（“单击按钮”）；
var alertNow=function（）{
警报（“你好，世界”）
}
对于（变量i=0；i

app.js

import React，{useffect}来自“React”；
导入“/App.css”；
函数App（）{
useffect（（）=>{
//从myscript调用函数
运行（）
},[])
返回(
点击我
);
}
导出默认应用程序；
您的脚本在react按钮存在之前运行。您希望在react完成第一次渲染后调用脚本
使用函数将代码包装在myscript
中，然后在useffect
hook中调用该函数
myscript.js

函数运行（）{
var myBtn=document.getElementsByClassName（“单击按钮”）；
var alertNow=function（）{
警报（“你好，世界”）
}
对于（变量i=0；i

app.js

import React，{useffect}来自“React”；
导入“/App.css”；
函数App（）{
useffect（（）=>{
//从myscript调用函数
运行（）
},[])
返回(
点击我
);
}
导出默认应用程序；
您正在尝试向尚未呈现的按钮添加事件侦听器。i、 e.您执行脚本太早
所以在脚本中使用加载

window.addEventListener（“加载”，（）=>{
var myBtn=document.getElementsByClassName（“单击按钮”）；
var alertNow=function（）{
警报（“你好世界”）；
};
对于（变量i=0；i

同样在html中，确保使用
。。。
...

请参见
您正在尝试向尚未呈现的按钮添加事件侦听器。i、 e.您执行脚本太早
所以在脚本中使用加载

window.addEventListener（“加载”，（）=>{
var myBtn=document.getElementsByClassName（“单击按钮”）；
var alertNow=function（）{
警报（“你好世界”）；
};
对于（变量i=0；i

同样在html中，确保使用
。。。
...

看
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 defer src="myscript.js"></script>
...