javascript - reactjs 事件 项目开发过程 零起点记录

Question

更新1

var NavRight = React.createClass({
    render: function() {
        return (
            <p>
                <ul id="nav_u">
                    <li id="back">返回</li>
                    <li id="open_card">开通</li>
                    <li id="update_card">补办</li>
                    <li id="recharge_card">充值</li>
                    <li id="search_card">查询</li>
                </ul>
            </p>
        )
    }
});

React.render(
    <NavRight />,
    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 (
            <p>
                <ul id="nav_u">
                    <li id="back" onClick={this.handleClickBack} className={action}>返回</li>
                    <li id="open_card" onClick={this.handleClickOpen} className={action}>开通</li>
                    <li id="update_card" onClick={this.handleClickUpdate} className={action}>补办</li>
                    <li id="recharge_card" onClick={this.handleClickRecharge} className={action}>充值</li>
                    <li id="search_card" onClick={this.handleClickSearch} className={action}>查询</li>
                </ul>
            </p>
        )
    }
});

现在开发到这里了 ，目前需要要的就是 单击的时候 就给自己 加上 className = action ，

意思就是 单击自己就高亮增加class action ， 其他的里 就去掉className action ；

如何做到呢？

移动端交互事件

交互事件详细

触摸事件

onTouchCancel  触摸取消 
onTouchEnd     手指触摸后离开 执行 
onTouchMove    手指触摸滑动 执行
onTouchStart   手指触摸屏幕 执行

更新3

导航单击组合 ； 高亮当前单击元素增加class 去掉统计元素calss

var Wrap = React.createClass({
    render:function(){
        return(
            <p>
                <p id="main_left" className="main_left">

                </p>
                <p id="main_right" className="main_right">
                    <NavRight />
                </p>
            </p>
        )
    }
});

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 (

                <ul id="nav_u" className="nav_u">
                    <li id="back" onClick={this.handleClickBack} className={index == 0 ? 'action' : ''}><span>返回</span></li>
                    <li id="open_card" onClick={this.handleClickOpen} className={index == 1 ? 'action' : ''}><span>开通</span></li>
                    <li id="update_card" onClick={this.handleClickUpdate} className={index == 2 ? 'action' : ''}><span>补办</span></li>
                    <li id="recharge_card" onClick={this.handleClickRecharge} className={index == 3 ? 'action' : ''}><span>充值</span></li>
                    <li id="search_card" onClick={this.handleClickSearch} className={index == 4 ? 'action' : ''}><span>查询</span></li>
                </ul>

        )
    }
});

React.render(
    <Wrap />,
    document.getElementById('wrap')
);

以上已完成 单击事件。

Answer 1

React对事件有一套自己的命名规范。

所以，要添加点击事件，只需要：

1、为对应标签添加onClick属性

// ...
<li id="back" onClick={this._handleBackClick}>返回</li>
// ...

2、实现_handleBackClick方法

var NavRight = React.createClass({
    _handleBackClick: function(e) {
        // blablabla...
    },
    render: function() {
        return (
            <p>
                <ul id="nav_u">
                    <li id="back" onClick={this._handleBackClick}>返回</li>
                    <li id="open_card">开通</li>
                    <li id="update_card">补办</li>
                    <li id="recharge_card">充值</li>
                    <li id="search_card">查询</li>
                </ul>
            </p>
        )
    }
});