这篇文章主要介绍“React事件监听的代码怎么写”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“React事件监听的代码怎么写”文章能帮助大家解决问题。
方法一：在constructor中使用bind绑定，改变this的指向，代码如下：
import React, { Component } from 'react';
export default class Group extends Component {
constructor(props) {
super(props);
this.state = {
show: true,
title: '大西瓜'
};
// 写法一：事件绑定改变this指向
this.showFunc = this.showFunc.bind(this);
}
// 调用该方法
showFunc() {
this.setState({
show: false
});
}
render() {
let result = this.state.show ? this.state.title : null;
return (
<div>
<button onClick={this.showFunc}>触发</button>
{result}
</div>
);
}
}
方法二：通过箭头函数改变this指向，代码如下：
import React, { Component } from 'react';
export default class Group extends Component {
constructor(props) {
super(props);
this.state = {
show: true,
title: '大西瓜'
};
}
// 第二种，通过箭头函数改变this指向
showFunc = () => {
this.setState({
show: false
});
};
render() {
let result = this.state.show ? this.state.title : null;
return (
<div>
<button onClick={this.showFunc}>触发</button>
{result}
</div>
);
}
}
方法三：直接使用箭头函数改变this的指向，代码如下：
import React, { Component } from 'react';
export default class Group extends Component {
constructor(props) {
super(props);
this.state = {
show: true,
title: '大西瓜'
};
}
// 调用该方法
showFunc() {
this.setState({
show: false
});
}
render() {
let result = this.state.show ? this.state.title : null;
return (
<div>
<button onClick={() => this.showFunc()}>触发</button>
{result}
</div>
);
}
}
关于“React事件监听的代码怎么写”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注云搜网行业资讯频道，小编每天都会为大家更新不同的知识点。
