基础事件绑定
语法: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;