react事件

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()
    }
}