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中的函数: