javascript - reactjs 事件项目开发过程零起点记录-PHP Chinese Network Q&A

更新1

var NavRight = React.createClass({ render: function() { return (  
 返回
 开通
 补办
 充值
 查询
 
 
 ) } }); React.render( , document.getElementById('container') );

生成一组导航，
如何给以上的导航点击触发事件呢

更新 2

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 手指触摸屏幕 执行

更新3

导航单击组合；高亮当前单击元素增加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') );