这里基于上一篇文章 JSX-绑定事件 主要介绍的就是最后一种，基于普通方法，和箭头函数的方法调用过程当中进行传参，其它的方式自行去进行传参，反正都是没有我博主这里介绍的最后一种方式简单，灵活方便的，那么废话不多说直接上代码来看一下吧。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../react17/react.development.v17.js"></script> <script src="../react17/react-dom.development.v17.js"></script> <script src="../react17/babel.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> class Home extends React.Component { constructor() { super(); this.state = {} } render() { return ( <div> <button onClick={() => { this.btnClick('yangbuyiya', 'it6666') }}> 我是按钮 </button> </div> ) } btnClick(a, b) { console.log(a, b); } } ReactDOM.render(<Home/>, document.getElementById('app')); </script> </body> </html>
至于其它的方式博主这里先将代码贴在下方有兴趣的话可自行去尝试一下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../react17/react.development.v17.js"></script> <script src="../react17/react-dom.development.v17.js"></script> <script src="../react17/babel.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> class Home extends React.Component { constructor() { super(); this.state = { message: 'yangbuyiya' } this.myClick = this.btnClick.bind(this); } render() { return ( <div> <div>{this.state.message}</div> <button onClick={this.btnClick}>按钮2</button> <button onClick={this.btnClick.bind(this)}>按钮3</button> <button onClick={this.myClick}>按钮4</button> </div> ) } btnClick(a, b) { console.log(a, b); } } ReactDOM.render(<Home/>, document.getElementById('app')); </script> </body> </html>
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
