React事件详解

基本使用

在 使用组件的地方 里面的 ReactDOM元素 行间内  on 加 事件类型 = { 函数 } 

<p onclick={ function(){console.log('点击事件')} }></p>

在react中，ReactDOM元素的事件，本质上就是一个行间属性，只不过这个属性传入的是函数体

 

注意点

 

1. 按照之前React对组件的约定，由于事件本质上是一个属性，因此也需要

    使用小驼峰命名法

 

2. 如果没有特殊处理，在事件处理函数中，this指向 为 undefined

 

事件函数内 this 指向

 

由于在类组件中，事件函数， 默认 this指向为 类， 当传递给子组件时， this 指向 为 子组件的props 对象， 为了防止混乱，索性让开发者自己去绑定this指向， 并把默认值设置为 undefined 。（在函数组件中，无需考虑 this 指向）

 

使用箭头函数

　　

　　1. 使用 ES Next 语法  书写在类中 (极力推荐这种方法，写着快，效率较好)， 如果只是单纯开发，了解这个方法即可，后续三个可以不管

　　

class A extends React.Component{
            constructor(props){
            
            }

　　　　　　　　// EsNext 语法  相当于在 constructor里面 this.handleClick = function(){  // 事件函数  }

　　　　　　　handleClick = () => { // 事件函数  } 
　　　　　　　render(){ 
　　　　　　　　　　return <div onClick={ this.handleClick }></div>  
　　　　　　　} 
}

　

　　2. 直接书写在 onClick={ 里面 }

　　

class A extends React.Component{
            constructor(props){
            
            }
            render(){
                return <div onClick={ () => {
                            //事件函数 
                        } 
                }></div>
            }
        }

使用bind函数 绑定this

　　

　　1. 在构造函数里面，通过bind绑定this，并且把原型上面

    　　的方法放到了对象实例上面（性能较好）

　　

class A extends React.Component{
            constructor(props){
                this.handleClick = this.handleClick.bind(this);
            }
            handleClick(){
            }
            render(){
                return <div onClick={this.handleClick}></div>
            }
        }

　　2. 直接书写在使用的地方，通过bind绑定this，返回新函数（性能较差）

　　

class A extends React.Component{
            constructor(props){
            
            }
            handleClick(){
            }
            render(){
                return <div onClick={this.handleClick.bind(this)}></div>
            }
        }

 

 

END