筑基-react事件处理以及this实例邦定

金禹铭
211 阅读4分钟

文章是连贯的

目录

这章节讲完了就开始业务实战了
props 的第六种使用场景也会在这章节介绍

Props 接受任意参
1、基础数据类型 
2、this.props.children 
3、接收一个html代码片段 （函数返回值） 
4、接收一个组件 
5、{...obj} 
6、子传父 callback形式


1)、箭头函数 tabFn1=()=>{}
调用：onClick={this.tabFn1}
2、在constructor 邦定实例，this.tabFn1 = this.tabFn1.bind(this);
调用：onClick={this.tabFn1}
3、事件触发时增加bind 但这种是可以增加参数
调用：onClick={this.tabFn2.bind(this,'传参')}
4、在事件触发时 增加一个箭头函数
调用：onClick={(e)=>{this.tabFn3(e,'text')}}

新建页面

react/first-react/src/App.js

1、引入
import Event from './views/Event';

2、使用
Event

3、在src/views/创建文件夹

mkdir -p src/views/Event

4、在Event中创建页面
vi src/views/Event/index.jsx

第一种增加一个事件

constructor(props){
    super(props);
    this.state = {
        name:'小明'
    }
}

tabFn(){
    console.log('点击事件');
}

render(){
    let {name} = this.state;
    return(
        <div>
            姓名是：{name}<br/>
            <input type="button" value="点击"
                onClick={this.tabFn}
            />
        </div>
    )
}

可以打印出一个内容

function tab(){

}
document.getElementById('btn').onclick = tab;
或
document.getElementById('btn').onclick = function(){
    tab()
}

点击按钮改变姓名

tabFn1(){
    console.log(this)
    this.setState({
        name:'点击后的名字小芳'
    })
}

<input type="button"
    value="点击1"
    onClick={this.tabFn1}
   />
无法修改，没有setState 方法
也就是说 this 未定义
所以我们现在解决this 指向问题

第一种 使用箭头函数

调用：onClick={this.tabFn1}
箭头函数 tabFn1=()=>{}

tabFn1 = ()=>{
    console.log(this)
    this.setState({
    name:'点击后的名字小芳'
    })
 }
可以看出只要在写函数时使用箭头函数的形式就可以解决

第二种在 constructor 中绑定js

还记得我们在前端 constructor 主要解决两个问题
1、state 初始化
2、this 邦定

使用方式也很简单


调用：onClick={this.tabFn1}

tabFn1(){
    console.log(this)
    this.setState({
        name:'点击后的名字小芳'
    })
}

只是需要在 constructor 邦定实例，

constructor(props){
    super(props);
    this.state = {
        name:'小明'
    }
    this.tabFn1 = this.tabFn1.bind(this);
}
这样我们this 的问题就解决了

但如果我们传参怎么办
所有第三种方法

第三种在 事件触发时增加bind

tabFn2(str){
    console.log(this)
    console.log(str)
    this.setState({
        name:'点击后的名字小芳'
    })
}

input type="button"
    value="点击2"
    onClick={this.tabFn2.bind(this,'test')}
     />
     
这样this 问题解决了  参数也解决了
但写起来看起来比较麻烦
所以有了第四种
也是常用的一种

第三种在 在事件触发时 增加一个箭头函数

还记得这段代码吧
function tab(){

}
document.getElementById('btn').onclick = tab;
或
document.getElementById('btn').onclick = function(){
    tab()
}

由以上的js 代码推出此代码
<input type="button"
     value="点击2"
     onClick={()=>{this.tabFn3()}}
      />
      
tabFn3(){
        console.log(this)
        this.setState({
            name:'点击后的名字小芳'
        })
    }

这样react事件处理以及this实例邦定
的4种方法就出来了
实际是两个bind 两个箭头函数
每一种方式都有具体的用途，
在后面我们会陆续再强化具体的使用场景

1)、箭头函数 tabFn1=()=>{}
调用：onClick={this.tabFn1}
2、在constructor 邦定实例，this.tabFn1 = this.tabFn1.bind(this);
调用：onClick={this.tabFn1}
3、事件触发时增加bind 但这种是可以增加参数
调用：onClick={this.tabFn2.bind(this,'传参')}
4、在事件触发时 增加一个箭头函数
调用：onClick={(e)=>{this.tabFn3(e,'text')}}

react 默认事件

js 中a 标签想加个点击事件
是不是要 javascript:; 或return false;
知识扩展
除了a 标签是不是 form 中的submit reset type=file 等是不是也有默认事件
那在react 中怎么阻止默认事件

function fn(ev){
    var ev = window.event || ev;
}
react 中是合成事件，不需要考虑兼容性问题
直接以参数形式就可以

<a href="true"
      onClick={(e)=>{this.hdFn(e)}}
      >这是标签事件</a>

 hdFn(e){
        e.preventDefault();
        console.log(e);
        console.log('这是a标签的事件');
    }


event.preventDefault();

阻默认事件完了就是事件冒泡

react 事件冒泡


js 中兼容事件冒泡
event.cancelBubble = true;

很多人认为是stopPropagation();
其实并不是哟，此处可以自行百度



写一个事件冒泡
就是一个div 内有个a 给a 标签加一个事件  同时也给div 加一个事件
点击a时，div 事件是否会执行，显示是的
那我们就解决


<div onClick={()=>{this.divFn()}}>
        这是div内容<br/>
        <a href="true"
        onClick={(e)=>{this.aFn(e)}}
        >这是div内容的a</a>
      </div>


divFn(){
    console.log('这是divFn');
}
aFn(e){
    e.preventDefault();
    e.stopPropagation();
    console.log('aFn');
}

event.stopPropagation(); 就可以直接阻冒泡了

ok

这样我们就把事件内容 解决this
参数以及阻默认事件
还有冒泡的问题讲完了

之前我们提过一个props使用场景有6个，最后一个要在事件来讲

在这我们就提一下

props 使用场景六

Props 接受任意参
1、基础数据类型 
2、this.props.children 
3、接收一个html代码片段 （函数返回值） 
4、接收一个组件 
5、{...obj} 
6、子传父 callback形式

筑基-Props任意参及六种使用场景

其实就是和接受一个方法是一样的
先看代码
1、引入
import Child from './Child.jsx';
2、使用
<Child callback={this.parentFn}/>


parentFn(text){
    console.log(text);
    console.log(this);
    console.log('这是关闭的操作');
}


在Child.jsx组件中


componentDidMount(){
   this.props.callback('文本的内容');
}
或
childFn(){
    this.props.callback('文本的内容');
}
看代码
实际是我们在当前组件是
this.parentFn
parentFn(text){
    console.log(text);
    console.log(this);
    console.log('这是关闭的操作');
}
但问题来了

因为是跨组件所以无法操作这个parentFn 方法
组件通信props
调取callback
this.props.callback();

子组件------直接调取 this.parentFn
不行拆分一下
子组件-----props 父组件方法
父组件方法props接受----可以直接this.parentFn

props接受是一样
相当于做了桥接

重而实际子组件操作父组件方法或把子组件信息传递给父组件
这样props 的六种使用场景也ok
avatar
文章
阅读
粉丝