事件处理 及冒泡 阻止默认事件 以及tab 切换的思路

1、axios post
通过点击事件提交数据
不需要使用input
直接使用state
2、pdd
你好天天象上
默认执行
点击（1，2，3）也可以执行
并且能切换页码
3、tab 针对新闻不同时
4、天天象上首页和精品微课右侧 鼠标滑过展示全内容

代码如下：

react/first-react/src/views/Event/index.jsx
import React, { Component } from 'react';
import Tab from './tab-bak.jsx';
/*
1、驼峰形式 onClick
2、调用 onClick={this.Fn}
    this指向问题
3、解决指向
    1、箭头函数 onLog1 = ()=>{}
    2、constructor this.fn = this.fn.bind(this)
    // 事件处理函数绑定实例
        onClick={this.Fn}
    3、onClick={()=>{this.onLog2('text')}}
    4、onClick={this.onLog3.bind(this,'text')}
4、给a标签添加一个事件
    阻止默认事件
    e.preventDefault();
5、冒泡
    stopPropagation()
*/

class View extends Component {
    constructor(props){
        super(props);
        this.state = {

        }
        this.onLog = this.onLog.bind(this);
    }

    onLog(){
        // 普通 函数
        console.log('首次打印')
        console.log(this)
    }
    onLog1 = ()=>{
        // 箭头函数
        console.log(this);
    }
    onLog2(text){
        //  onClick={()=>this.fn(val)}
        console.log(text);
        console.log(this);
    }
    onLog3(text){
        console.log(text);
        console.log(this);
    }
    onAtag(e){
        e.preventDefault();
        console.log('这是a标签的事件');
    }


    onDivAtag(e){

        e.stopPropagation();
        console.log('这是div里的a标签');
    }
    onDiv(){
        console.log('这是div标签');
    }
    render(){
        return(
            <div>
                <h3>事件</h3>
                普通 事件：<input onClick={this.onLog}
                type="button" value="点我"/><br/>

                箭头函数：<input onClick={this.onLog1}
                type="button" value="点我1"/><br/>

                调用时 使用箭头函数：<input
                onClick={()=>{this.onLog2('text')}}
                type="button" value="点我2"/><br/>

                调用时 使用bind函数：
                <input
                onClick={this.onLog3.bind(this,'text')}
                type="button" value="点我3"/><br/>

                <br/><br/>
                给a标签添加一个事件：
                <a onClick={(e)=>{this.onAtag(e)}}
                href="true">这是a标签</a><br/>
                <br/><br/>
                事件冒泡
                <div onClick={()=>{this.onDiv()}}>
                    <span onClick={(e)=>{this.onDivAtag(e)}}
                    >这是div里面的a标签</span>
                </div>

                <Tab/>
            </div>
        )
    }
}




export default View;

React JSX

Copy

react/first-react/src/views/Event/tab.jsx
import React, { Component } from 'react';

class View extends Component {
    constructor(props){
        super(props);
        this.state = {
            cur:3,
            cur2:1,
        }
    }
    tabSwitch(name,index){
        // cur
        // cur2
        // [name]
        this.setState({
            [name]:index
        })
        // type = 1 显示 在校生
        // type = 2 显示 毕业
        // type = 3 显示 请假
        // type = 4 显示 未返校
        // if(type--)
        // switch (expression) {
        //     case expression:
        //
        //         break;
        //     default:
        //
        // }
        // const typeArr = ['','在校生','毕业','请假','未返校']
        // typeArr[type]
        // const typeCfg = {
        //     '1':'在校生'
        //     '2':'毕业'
        //     '3':'请假'
        //     '4':'未返校'
        // }
        // typeCfg[type]
    }
    // tabSwitch2(index){
    //     this.setState({
    //         cur2:index
    //     })
    // }
    // class 想办法通用
    clsFn(_index,cls1,cls2){
        let {cur2} = this.state;
        return cur2===_index ? cls1:cls2;
    }
    render(){
        let { cur } = this.state;
        return(
            <div>
<div className="tab_con">
    <ol>
        <li onClick={()=>{this.tabSwitch('cur',1)}} className={cur===1?'cur':''}>菜单一</li>
        <li onClick={()=>{this.tabSwitch('cur',2)}} className={cur===2?'cur':''}>菜单二</li>
        <li onClick={()=>{this.tabSwitch('cur',3)}} className={cur===3?'cur':''}>菜单三</li>
    </ol>
    <ul>
        <li className={cur===1?'cur li':'li'}>内容一</li>
        <li className={cur===2?'cur li':'li'}>内容二</li>
        <li className={cur===3?'cur li':'li'}>内容三</li>
    </ul>
</div>
<div className="tab_con">
    <ol>
        <li onClick={()=>{this.tabSwitch('cur2',1)}} className={this.clsFn(1,'cur li','li')}>菜单一</li>
        <li onClick={()=>{this.tabSwitch('cur2',2)}} className={this.clsFn(2,'cur li','li')}>菜单二</li>
        <li onClick={()=>{this.tabSwitch('cur2',3)}} className={this.clsFn(3,'cur li','li')}>菜单三</li>
    </ol>
    <ul>
        <li className={this.clsFn(1,'cur li','li')}>内容一</li><li className={this.clsFn(2,'cur li','li')}>内容二</li><li className={this.clsFn(3,'cur li','li')}>内容三</li></ul></div><div className="tab_con2"><ol><li onClick={()=>{this.tabSwitch('cur2',1)}} className={this.clsFn(1,'cur li','li')}>菜单一</li><li onClick={()=>{this.tabSwitch('cur2',2)}} className={this.clsFn(2,'cur li','li')}>菜单二</li><li onClick={()=>{this.tabSwitch('cur2',3)}} className={this.clsFn(3,'cur li','li')}>菜单三</li></ol><ul></ul></div></div>
        )
    }
}
export default View;

React JSX

Copy

react/first-react/src/styles/event.scss
@charset "UTF-8";
.tab_con {
    width:500px;
    margin:0 auto;
    ol {
        height:40px;
        overflow:hidden;
        li {
            float:left;
            height:40px;
            line-height: 40px;
            width:100px;
            text-align: center;
            font-size:14px;
            color:#fff;
            background: #333;
            cursor: pointer;
            margin-right:5px;
            &.cur {
                background: #f60;
            }
        }
    }
    ul {
        li {
            min-height:200px;
            border:1px solid red;
            display:none;
            &.cur{
                display: block;
            }
        }
    }
}