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. 快速入门上手JavaScript中的Promise

    当我还是一个小白的时候,我翻了很多关于Promise介绍的文档,我一直没能理解所谓解决异步操作的痛点是什么意思 直到我翻了谷歌第一页的所有中文文档我才有所顿悟,其实从他的英文字面意思理解最为简单粗暴 ...

  2. Codeforces 710F - String Set Queries(AC 自动机)

    题面传送门 题意:强制在线的 AC 自动机. \(n,\sum|s|\leq 3\times 10^5\) 如果不是强制在线那此题就是道 sb 题,加了强制在线就不那么 sb 了. 这里介绍两种做法: ...

  3. 【2020五校联考NOIP #2】矩阵

    咕咕咕到现在~ 题面传送门 题意: 给出一个 \(n\times n\) 的矩阵 \(A\).要你求有多少个 \(n\times n\) 的矩阵 \(B\) 满足: 每一行都是 \(1\) 到 \(n ...

  4. 洛谷 P2257 - YY的GCD(莫比乌斯反演+整除分块)

    题面传送门 题意: 求满足 \(1 \leq x \leq n\),\(1 \leq y \leq m\),\(\gcd(x,y)\) 为质数的数对 \((x,y)\) 的个数. \(T\) 组询问. ...

  5. 洛谷 P5332 - [JSOI2019]精准预测(2-SAT+bitset+分块处理)

    洛谷题面传送门 七月份(7.31)做的题了,题解到现在才补,不愧是 tzc 首先不难发现题目中涉及的变量都是布尔型变量,因此可以考虑 2-SAT,具体来说,我们将每个人在每个时刻的可能的状态表示出来. ...

  6. error while loading shared libraries: libstdc++.so.5: wrong ELF class: ELFCLASS64

    今天部署一个探针在运行的时候报了这样一个错:error while loading shared libraries: libstdc++.so.5: wrong ELF class: ELFCLAS ...

  7. 一款真正可以拿的出手的本土嵌入式RTOS-SylixOS

    由 winniewei 提交于 周四, 12/20/2018 作者:张国斌 在参加工信部人才交流中心和南京浦口区开发区管委会联合举办的第三届集成电路产业紧缺人才创新发展高级研修班暨产业促进交流会期间, ...

  8. Lombok安装及Spring Boot集成Lombok

    文章目录 Lombok有什么用 使用Lombok时需要注意的点 Lombok的安装 spring boot集成Lombok Lombok常用注解 @NonNull @Cleanup @Getter/@ ...

  9. Undefined symbols for architecture arm64:问题

    Undefined symbols for architecture arm64: "_sqlite3_prepare_v2", referenced from: +[HMJSch ...

  10. vue-cli4脚手架搭建一

    涉及内容 html  css   javascript   node.js   npm    webpack 2.9.6是常用版本 vue-cli4是基于webpack的 webpack是基于node ...