12、react之 事件
来源:互联网 发布:博客营销软件 编辑:程序博客网 时间:2024/06/07 19:57
事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>事件处理函数</title> <script src="js/react.min.js"></script> <script src="js/react-dom.min.js"></script> <script src="js/browser.js"></script></head><body> <div id="app"></div> <script type="text/babel"> var Demo = React.createClass({ handleClick:function(e){ console.log(e) console.log(e.target) console.log(e.nativeEvent) }, render:function(){ return <div onClick={this.handleClick}>Hello World</div> } }) ReactDOM.render(<Demo/>,document.getElementById('app')) </script></body>
案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>事件处理函数案例</title> <script src="js/react.min.js"></script> <script src="js/react-dom.min.js"></script> <script src="js/browser.js"></script></head><body> <div id="app"></div> <script type="text/babel"> var Demo = React.createClass({ getInitialState:function(){ return { width: 200, height: 200, backgroundColor: '#DDDDDD' } }, /*handleWheel:function(e){ var newColor = (parseInt(this.state.backgroundColor.substr(1),16) + e.deltaY).toString(16) newColor = '#' + newColor.toUpperCase() console.log(newColor) this.setState({ backgroundColor:newColor }) },*/ randomColor:function(){ var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); return 'rgb('+r+','+g+','+b+')' }, handleWheel:function(){ this.setState({ backgroundColor:this.randomColor() }) }, render:function(){ return <div onWheel={this.handleWheel} style={this.state}>这是一个案例,鼠标滚动实现背景颜色的变化</div> } }) ReactDOM.render(<Demo/>,document.getElementById('app')) </script></body></html>
阅读全文
0 0
- 12、react之 事件
- react 之 事件处理
- react之onChange事件
- react入坑之事件
- 6.React中文之处理事件
- React事件
- react事件
- react-native之native主动向js发送事件
- react-native之js事件发送并得到返回结果
- React入门实践之TodoList: 添加事件和搜索框
- React学习之事件绑定处理机制(五)
- React学习之高级事件系统(二十七)
- React Native Text组件之点击和长按事件
- React 之 react-router
- react 事件系统
- React-事件处理详解
- React-事件处理详解
- React Native中的事件
- Android中使用自定义样式和主题
- 动态规划
- Ajax调用servlet无反应?理理思路,找找错误.
- Neuroph studio 入门教程
- 一步一步实现自己的GAN
- 12、react之 事件
- RunLoop的应用和RunLoop的面试题
- 高级控件之下拉刷新
- ucos-ii系统分析一
- #6 阻止和重启路由
- 2017年中科大高级软件工程学习心得
- Java开发中的23种设计模式详解----原型模式
- Linux下实现getch()函数
- jvm-3-jvm参数