React中的事件绑定

基础事件绑定

语法：on + 事件名称 = { 事件处理程序 }，整体上遵循驼峰命名法

function App() {
   const handleClick =()=>{
   console.log('button被点击了');
 }
 
  return (
    <div className="App">
      <button onClick ={handleClick}>click me</button>     
    </div>
  )
}

export default App;

使用事件对象参数绑定

语法：在事件回调函数中设置形参e

function App() {
  // const handleClick =()=>{
  //   console.log('button被点击了');
  // }
  //事件参数e
  const handleClick =(e)=>{
    console.log('button被点击了',e)
  }
  return (
    <div className="App">
      <button onClick ={handleClick}>click me</button>     
    </div>
  )
}

export default App;

传递自定义参数

> 语法：事件绑定的位置改造成箭头函数的写法，在执行clickHandler实际处理业务函数的时候传递实参

function App() {
  // const handleClick =()=>{
  //   console.log('button被点击了');
  // }
  //传递自定义参数
  const handleClick =(name)=>{
    console.log('button被点击了',name)
  }
  return (
    <div className="App">
      <button onClick ={()=>handleClick('jack')}>click me</button>     
    </div>
  )
}

export default App;

 同时传递事件对象和自定义参数

> 语法：在事件绑定的位置传递事件实参e和自定义参数，clickHandler中声明形参，注意顺序对应

//项目的根组件，一切组件的根基
function App() {
  // const handleClick =()=>{
  //   console.log('button被点击了');
  // }
  //同时传递事件对象和自定义参数

  const handleClick =(name,e)=>{
    console.log('button被点击了',name,e)
  }
  return (
    <div className="App">
      <button onClick ={(e)=>handleClick('jack',e)}>click me</button>     
    </div>
  )
}

export default App;