React学习笔记之事件处理（二）
更新时间：2017年07月02日 10:02:33 作者：Zhang Xiao
这篇文章主要跟大家介绍了关于React中事件处理的相关资料，文中通过示例代码介绍的非常详细，对大家学习React具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
之前已经给大家介绍了React中的条件渲染（传送门），本文将给大家关于React中事件处理的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍：
React的事件处理和DOM的事件处理是很相似的，只是有一些语法上的区别：
- React的事件名是驼峰的，不是小写的
- 在JSX语法中，你传递一个fucntion作为时间处理器，而不是一个string
举个例子：
<button onClick={activateLasers}>
Activate Lasers
</button>
而且如果你想拿到事件对象event，这个对象是React按照w3c标准完成的，所以不用担心浏览器的兼容性，可以像如下这样：
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" rel="external nofollow" onClick={handleClick}>
Click me
</a>
);
}
如果用ES6的class写法可以像如下一样：
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// 这个`this`绑定是有必要的，用来让this可以在回调中被正确指向React组件的实例对象
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);
还有两种方式可以避免写显式bind(this) ，但是都不推荐这么用啊~所以就不再赘述~
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
这篇文章主要介绍了详解React中setState回调函数，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了浅谈从React渲染流程分析Diff算法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
useState通过在函数组件里调用它来给组件添加一些内部state,下面这篇文章主要给大家介绍了关于React中useState的使用方法及注意事项的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了React如何动态控制伪元素样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
React可以说是前端的先驱者,它总是会引领整个前端的潮流。 但我们在使用也经常会遇到错误，下面这篇文章主要给大家介绍了关于React编程中需要注意的两个错误，需要的朋友可以参考下2021-05-05
这篇文章主要介绍了浅谈webpack+react多页面开发终极架构，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
React Native可定制底板组件Magic Sheet使用示例
这篇文章主要为大家介绍了React Native可定制的底板组件Magic Sheet使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
React onClick/onChange传参(bind绑定)问题
这篇文章主要介绍了React onClick/onChange传参(bind绑定)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要介绍了使用Node搭建reactSSR服务端渲染架构,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
在React Native社区中,原生动态导入一直是期待已久的功能,在这篇文章中,我们将比较静态和动态导入,学习如何原生地处理动态导入,以及有效实施的最佳实践,希望对大家有所帮助2024-02-02
最新评论