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中JSX的注意点，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
一个路由就是一个映射关系(key:value),key为路径, value可能是function或component,本文给大家介绍React 路由react-router-dom详解,感兴趣的朋友跟随小编一起看看吧2024-01-01
这篇文章主要为大家介绍了React Fiber中面试官最关心的技术话题解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要介绍了解决配置setupProxy.js代理,页面报错404问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
React UI组件库之快速实现antd的按需引入和自定义主题
react入门学习告一段路,下面这篇文章主要给大家介绍了关于React UI组件库之快速实现antd的按需引入和自定义主题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
相信很多小伙伴们都一直在疑惑，setState 到底是同步还是异步。本文就详细的介绍一下React中setState同步或异步问题，感兴趣的可以了解一下2021-11-11
这篇文章主要为大家介绍了useCallback和useMemo的正确用法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
本文主要介绍了react-router中Link标签和a标签有什么区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-06-06
这篇文章主要介绍了React Hooks常用钩子及基本原理,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了React key值的作用和使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
最新评论