react 绑定事件
2016-08-04 23:20
393 查看
1.显示隐藏
2.输入框输入内容,立即显示出来
代码如下:
注意:版本
React v15.0.1
ReactDOM v15.0.1
browser.min.js是编译文件,将代码解析为浏览器识别的js
2.输入框输入内容,立即显示出来
代码如下:
注意:版本
React v15.0.1
ReactDOM v15.0.1
browser.min.js是编译文件,将代码解析为浏览器识别的js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <script type="text/javascript" src="react.js"></script> <script type="text/javascript" src="react-dom.js"></script> <script type="text/javascript" src="browser.min.js"></script> </head> <body> <div id="container"></div> <script type="text/babel"> var TestClickComponent=React.createClass({ handleClick:function(event){ var tip=this.refs.tip; if(tip.style.display=="none"){ tip.style.display='inline'; }else{ tip.style.display='none'; } event.stopPropagation(); event.preventDefault(); }, render:function(){ return( <div> <button onClick={this.handleClick}>显示|隐藏</button><span ref="tip">测试</span> </div> ) } }); var TestInputComponent=React.createClass({ getInitialState:function(){ return{ inputContent:'' } }, changeHandler:function(event){ this.setState({ inputContent:event.target.value }) event.stopPropagation(); event.preventDefault(); }, render:function(){ return( <div> <input type="text" onChange={this.changeHandler}/> <span>{this.state.inputContent}</span> </div> ) } }); ReactDOM.render(<div> <TestClickComponent/> <TestInputComponent/> </div>,document.getElementById("container")); </script> </body> </html>
相关文章推荐
- React学习之事件绑定处理机制(五)
- 每日质量NPM包事件绑定_bindme(详解React的this)
- React学习之事件绑定的几种方法对比
- react事件绑定--不再需要bind啦(es6)
- React事件绑定总结
- React事件绑定几种方法测试
- react-事件绑定
- 关于react绑定事件中的this
- React中ES6事件绑定相关事项
- react 实现双向绑定以及事件绑定
- react绑定事件
- React绑定事件动态化的实现方法
- React Native 原生与JS之间事件绑定注册 作用在于原生可以直接调用JS的方法
- react合成事件的三种绑定方式bind
- React事件绑定的几种方式对比
- react绑定事件的三种方式
- Android开发学习笔记:为动态添加的Spinner控件绑定数据源以及监听事件
- js几个简单的工具类函数 事件绑定处理、加载数据字典下拉框、重新加载下拉框、参数处理
- TR 绑定的 onclick 事件,如何排除其中一些 TD 对onclick 事件的绑定
- HTML中定义的事件和JS中事件绑定的区别