如何从普通javascript获取React按钮的点击事件和类名?

问题描述 投票:0回答:1

我很好奇,是否有办法从index.html脚本标记中的原始JS获取React的点击事件和按钮className?

这是我的index.html文件,来自create-react-app。我已经在脚本标记中添加了我的原始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项目上使用script标记时,效果很好。.但是看起来它无法从React获取事件?

我将不胜感激!

javascript html reactjs create-react-app react-dom
1个回答
0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.