React 事件传递传递参数及事件对象

标签：clickHandler React console log 传递 事件 组件

React 事件

1、React 事件的命名采用小驼峰式（camelCase），而不是纯小写。 2、使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。 3、在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault 。   React 函数组件获取事件对象e (合成事件)

function GetName(){
  const clickHandler = (e)=>{
    console.log(e)
  }
  return <div onClick={clickHandler}>这是函数事件</div>
}

React函数组件获取事件参数

function GetName(){
  const clickHandler = (e,name)=>{
    console.log(e)
    console.log(name)
  }
  return <div onClick={(e)=>clickHandler(e,'keep')}>这是函数事件</div>
}

React class 组件获取事件对象e

class GetAge extends React.Component{
  clickHandler=(e)=>{
    console.log(e)
  }
  render(){
    return <div onClick={this.clickHandler}>这是类组件</div>
  }
}

React class组件获取事件参数

方式一：
class GetAge extends React.Component{
  clickHandler=(age,e)=>{
    console.log(age)
    console.log(e)
  }
  render(){
    return <div onClick={this.clickHandler.bind(this,'18')}>这是类组件</div>
  }
}

方式二：
class GetAge extends React.Component{
  clickHandler=(age,e)=>{
    console.log(age)
    console.log(e)
  }
  render(){
    return <div onClick={(e)=>this.clickHandler('18',e)}>这是类组件</div>
  }
}

 

参考

https://www.cnblogs.com/yunmoqing/p/16197080.html

 

标签：clickHandler,React,console,log,传递,事件,组件
From： https://www.cnblogs.com/-roc/p/17104988.html