React 事件传递传递参数及事件对象
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