添加事件
export default function Button(){
function handleClick(){
alert('click me ')
}
return (
<button onClick={handleClick}>
click me
</button>
)
}
点击事件也有两种形态 按情况进行使用
<button onClick={function handleClick() {alert('you clicke me ')}}>
</button>
<button onClick= {()=> {
alert('you clicke me ')
}}
></button>
在没有点击时就在组件渲染时就直接alert 结果
<button onClick={alert('you are click me ')}>
</button>
<button onClick={()=> alert('clike')}></button>
读取props 触发事件
function AlertButton({message, children }){
return (
<button onClick={()=> alert(message)}>
{children}
</button>
)
}
export default function Toolbar(){
return (
<div>
<AlertButton message='playing'>play movie</AlertButton>
<AlertButton message='uploading'>upload movie</AlertButton>
</div>
)
}
所有的可变变量都可以通过参数传入进来
也可以将方法作为props传入
// 基础按钮形态
function Button({onClcik, children}){
rteurn (
<button onClick = {onClcik}>
{children}
</button>
)
}
按照原button类型 带入参数 点击事件和 ｎａｍｅ
function palayButton({movieName}){
function handelPlayclick(){
alert('playing ${movieName}')
}
return (
<Button onClick = {handelPlayclick}>
paly "{movieName}"
</Button>
)
}
function UplaodButton(){
return (
<Button onClick={ ()=> alert(
'uploading'
)}>
upload Image
</Button>
)
}
export default function Toolbar(){
return (
<div>
<palayButton movieName = "KKOKOEDEK"> </palayButton>
<UplaodButton/>
</div>
)
}
两个组件函数 都能达到 点击按钮 触发点击事件的效果
具体的区别还需要进一步的去验证
事件相关的知识后续会继续不断的更新学习
