react事件

2020-06-26  本文已影响0人  我爱阿桑
1 .常用的点击事件的写法
class ParentDom extends React.Component{
    constructor(props){
      super(props)
    }
    render(){
      return(
        <div onClick={this.parentEvent}>

        </div>
      )
    }
    parentEvent=(e)=>{
      console.log(e);
      -------------react返回的事件对象是代理的原生的事件对象----------
     --------------所以要使用,需要在前面加e,如之前的禁止点击跳转是return false,现在应该改为e.preventDefault()
    }
}

e打打印结果


image.png
2 . 事件传参
class ParentDom extends React.Component{
    constructor(props){
      super(props)
    }
    render(){
      return(
         //使用es6箭头函数,不用绑定this
        <div onClick={(e)=>{ this.parentEvent('mjc',e)} }></div>
         // 或者匿名函数
        <div onClick={function(e){this.parentEvent('mjc',e)}.bind(this)   }></div>
      )
    }
    parentEvent=(val,e)=>{
      console.log(val);
      console.log(e);
      -------------react返回的事件对象是代理的原生的事件对象----------
     --------------所以要使用,需要在前面加e,如之前的禁止点击跳转是return false,现在应该改为e.preventDefault()
    }
}
上一篇 下一篇

猜你喜欢

热点阅读