react如何写点击事件

react写点击事件的方法：1、使用bind绑定，代码为【this.clicked.bind(this,"hello world")】；2、使用箭头函数，代码为【onClick={(event)=>this.clicked("hello】。

本教程操作环境：windows7系统、react16版，该方法适用于所有品牌电脑。

react写点击事件的方法：

1、bind绑定

第一个参数指向this，第二个参数开始才是事件函数接收到的参数，事件对象event默认是最后一个参数。

... clicked(param,event){     console.log(param) //hello world     console.log(event.target.value) //按钮 } render(){     return (         <React.Fragment>             <button value="按钮" onClick={this.clicked.bind(this,"hello world")}>点击</button>         </React.Fragment>     ) } ...

这里的话绑定this可以统一写，这样代码看起来整洁点。

... constructor(props){     super(props);     this.state = {};     this.checkMenu = this.checkMenu.bind(this); } clicked = (param)=>{     return (event)=>{         console.log(event.target.value); // 按钮         console.log(param); // hello     } } render(){     return (         <React.Fragment>             <button value="按钮" onClick={this.clicked('hello')}>点击</button>         </React.Fragment>     ) } ...

2、箭头函数

箭头函数若要传事件对象event的话，需要在箭头函数中把event作为参数传递给触发的事件。

... clicked(param,event){     console.log(param) //hello world     console.log(event.target.value) //按钮 } render(){     return (         <React.Fragment>             <button value="按钮" onClick={(event)=>this.clicked("hello world",event)}>点击</button>         </React.Fragment>     ) } ...

相关免费学习推荐：JavaScript（视频）

以上就是react如何写点击事件的详细内容，更多内容请关注技术你好其它相关文章！