React中jsx调用js例子

需求:

界面新增一个“导入项目”按钮,点击该按钮可以执行项目导入功能。按钮点击事件部分是jsx语法代码,而项目导入部分是封装的js语法代码,假设此处用alert("123")代替。若点击按钮出现alert("123")弹框,表示onClick事件执行了js语法代码。

具体示例如下:

项目导入部分ImportProject.js文件:

export const IMPP = {
click_alert:function(){
alert("123");
}
};

jsx里引入js文件部分:

import {IMPP} from'./ImportProject.js';

jsx里按钮点击事件部分:

render() {
       return (
             <button type="button" className="ant-btn btn-filter ant-btn-primary" onClick={()=>(IMPP.click_alert())}><span>导入项目</span></button>
        ); 
  }

效果图:

点击“导入项目”按钮,即可触发ImportProject.js中的函数:

 

posted @   ycyzharry  阅读(8223)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构

喜欢请打赏

扫描二维码打赏

支付宝打赏

点击右上角即可分享
微信分享提示