添加事件
export default function Button(){
function handleClick(){
alert('click me ')
}
return (
<button onClick={handleClick}>
click me
</button>
)
}
點(diǎn)擊事件也有兩種形態(tài) 按情況進(jìn)行使用
<button onClick={function handleClick() {alert('you clicke me ')}}>
</button>
<button onClick= {()=> {
alert('you clicke me ')
}}
></button>
在沒有點(diǎn)擊時就在組件渲染時就直接alert 結(jié)果
<button onClick={alert('you are click me ')}>
</button>
<button onClick={()=> alert('clike')}></button>
讀取props 觸發(fā)事件
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>
)
}
所有的可變變量都可以通過參數(shù)傳入進(jìn)來
也可以將方法作為props傳入
// 基礎(chǔ)按鈕形態(tài)
function Button({onClcik, children}){
rteurn (
<button onClick = {onClcik}>
{children}
</button>
)
}
按照原button類型 帶入?yún)?shù) 點(diǎn)擊事件和√抻Αｎａｍｅ
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>
)
}
兩個組件函數(shù) 都能達(dá)到 點(diǎn)擊按鈕 觸發(fā)點(diǎn)擊事件的效果
具體的區(qū)別還需要進(jìn)一步的去驗(yàn)證
事件相關(guān)的知識后續(xù)會繼續(xù)不斷的更新學(xué)習(xí)
