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;
}
}
}
}

 

事件处理 及冒泡 阻止默认事件 以及tab 切换的思路的更多相关文章

  1. vue 事件上加阻止冒泡 阻止默认事件

    重点 vue事件修饰符 <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提 ...

  2. JavaScript事件:事件处理模型(冒泡、捕获)、取消冒泡、阻止默认事件

    (一)事件处理模型---事件冒泡.捕获 (1)事件冒泡 24 <body> 25 <div class="warpper"> 26 <div clas ...

  3. js阻止冒泡和默认事件(默认行为)详解- jquery DefaultPrevented 函数

    <!DOCTYPE html> <html>     <head>     <meta charset="UTF-8">     & ...

  4. 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别

    今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...

  5. js之阻止事件冒泡(待修改)和阻止默认事件

    阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  6. javascript 阻止事件冒泡和阻止默认事件对比

    公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...

  7. DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理

    事件对象——兼容处理 /* * 功能: 事件对象兼容 * 参数: 表示常规浏览器的事件对象e */ function getEvent(e) { // 如果存在e存在,直接返回,否则返回window. ...

  8. JS 之 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别

    在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...

  9. js阻止默认事件,如a标签跳转和事件冒泡

    禁止a标签点击跳转 <a href="http://baidu.com" onclick="return false">点我啊</a> ...

随机推荐

  1. SpringBoot集成邮件发送

    一:简述 在日常中的工作中难免会遇到程序集成邮件发送功能.接收功能:此篇文章我将使用SpringBoot集成邮件发送功能和接收功能:若对邮件一些基本协议和发送流程不懂的请务必参考我之前写的博客或者浏览 ...

  2. 为什么前端H5工程师工资那么高?

    目前,企业对于html5前端开发人才需求量非常大,小到企业网站.个人主页,大到政府部门,都是通过网站向外界展示形象.传播信息,网站离不开HTML5前端开发人员,所以学习html5前端开发在当前社会非常 ...

  3. AGC050B Three Coins

    做的时候有思考到是否能转化成移动点问题,但是没有清晰的把他解释出来. NOIP的时候也一样,T3也有考虑到是否能转为差分,但是也没有清晰的写出来. 自己做题的时候应尽量保证草稿纸和思绪的清晰,而不是在 ...

  4. DirectX12 3D 游戏开发与实战第七章内容(上)

    利用Direct3D绘制几何体(续) 学习目标 学会一种无须每帧都要刷新命令队列的渲染流程,以此来优化性能 了解另外两种根签名参数类型:根常量和根描述符 探索如何在程序中生成和绘制常见的几何体:如栅格 ...

  5. 《python编程从入门到实践》读书实践笔记(一)

    本文是<python编程从入门到实践>读书实践笔记1~10章的内容,主要包含安装.基础类型.函数.类.文件读写及异常的内容. 1 起步 1.1 搭建环境 1.1.1 Python 版本选择 ...

  6. python14异常处理

    def test_div(num1,num2): return num1 / num2 if __name__ == "__main__": try: print(test_div ...

  7. Rust 指定安装目录

    集群home目录被管理员限制了存储空间,rust安装要100多M,默认安装home目录下,查了一圈,没找到rust指定安装目录的办法. 这里记录下解决办法: 在想要安装的目录执行 mkdir -p c ...

  8. Python中的随机采样和概率分布(一)

    Python(包括其包Numpy)中包含了了许多概率算法,包括基础的随机采样以及许多经典的概率分布生成.我们这个系列介绍几个在机器学习中常用的概率函数.先来看最基础的功能--随机采样. 1. rand ...

  9. 学习java的第十天

    一.今日收获 1.java完全学习手册第二章2.9程序流程控制中的选择结构与顺序结构的例题 2.观看哔哩哔哩上的教学视频 二.今日问题 1.例题的问题不大,需要注意大小写,新的语句记忆不牢 2.哔哩哔 ...

  10. InnoDB学习(二)之ChangeBuffer

    ChangeBuffer是InnoDB缓存区的一种特殊的数据结构,当用户执行SQL对非唯一索引进行更改时,如果索引对应的数据页不在缓存中时,InnoDB不会直接加载磁盘数据到缓存数据页中,而是缓存对这 ...