React环境下HTML引入JS函数失败：LoginClick未定义问题求助

问题根源 #

1. Create React App构建限制：src目录下的文件会被Webpack编译打包，不会直接作为静态文件暴露给public目录下的HTML访问。你用<script src="../src/login.js"></script>引用，浏览器无法找到该文件，函数自然无法被识别。
2. HTML onclick语法错误：你在按钮上使用了React JSX的语法onclick={LoginClick}，但这是普通HTML文件，必须用字符串形式的函数调用onclick="LoginClick()"。

解决方案 #

方案一：调整静态资源结构（适合纯HTML+JS场景，不推荐React项目使用）

• 将src/login.js移动到public目录下，比如创建public/js文件夹并放入该文件。
• 修改HTML中的脚本引用路径：

  <script src="js/login.js"></script>
  

• 修正按钮的onclick属性：

  <button id="login" onclick="LoginClick()">Login</button>
  

方案二：改用React组件（推荐，符合React开发规范）

既然你在学习React，建议用React组件的方式实现，这是项目的标准写法：

1. 删除public/login.html，在src目录下创建Login.js组件：

import React from 'react';

export default function Login() {
  const handleLoginClick = () => {
    alert("hey");
  };

  return (
    <div className="login">
      <label htmlFor="uname">Username</label>
      <input type="text" id="uname" /><br />
      <label htmlFor="pwd">Password</label>
      <input type="password" id="pwd" /><br />
      <button onClick={handleLoginClick}>Login</button>
    </div>
  );
}

2. 在src/App.js中引入并使用这个组件：

import Login from './Login';

function App() {
  return (
    <div className="App">
      <Login />
    </div>
  );
}

export default App;

3. 启动项目后，点击按钮就能正常触发弹窗，Webpack会正确处理所有源码文件，函数作用域也能正常识别。

内容的提问来源于stack exchange，提问作者Indrajeeth