var NavRight = React.createClass({ render: function() { return (
) } }); React.render( , document.getElementById('container') );
生成一组导航,
如何给以上的导航 点击触发 事件呢
var NavRight = React.createClass({ handleClickBack: function(event) { this.className = "action2"; console.log("返回"); }, handleClickOpen: function(event) { console.log("开通"); }, handleClickUpdate: function(event) { console.log("补办"); }, handleClickRecharge: function(event) { console.log("充值"); }, handleClickSearch: function(event) { console.log("查询"); }, render: function() { var action = 'action'; return (
) } });
现在开发到这里了 ,目前需要要的就是 单击的时候 就给自己 加上className
= action ,
意思就是 单击自己就高亮增加class action , 其他的里 就去掉className action
;
如何做到呢?
交互事件详细
触摸事件
onTouchCancel 触摸取消 onTouchEnd 手指触摸后离开 执行 onTouchMove 手指触摸滑动 执行 onTouchStart 手指触摸屏幕 执行
导航单击组合 ; 高亮当前单击元素增加class
去掉统计元素calss
var Wrap = React.createClass({ render:function(){ return(
) } }); var NavRight = React.createClass({ getInitialState: function () { return { currentIndex: -1 }; }, handleClickBack: function(event) { this.className = "action2"; console.log("返回"); console.log(this); this.setState({currentIndex:0}); }, handleClickOpen: function(event) { console.log("开通"); this.setState({currentIndex:1}); }, handleClickUpdate: function(event) { console.log("补办"); this.setState({currentIndex:2}); }, handleClickRecharge: function(event) { console.log("充值"); this.setState({currentIndex:3}); }, handleClickSearch: function(event) { console.log("查询"); this.setState({currentIndex:4}); }, render: function() { var index = this.state.currentIndex; return ( ) } }); React.render( , document.getElementById('wrap') );
以上已完成 单击事件。
React对事件有一套自己的命名规范。
所以,要添加点击事件,只需要:
1、为对应标签添加
onClick
属性2、实现
_handleBackClick
方法