我很好奇,是否有办法从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获取事件?
我将不胜感激!
您的脚本在运行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;