之前在react組件中示绊,點(diǎn)擊按鈕改變input框的編輯狀態(tài)。我們給結(jié)構(gòu)添加onClick,咦暂论?奇怪面褐,為什么不是onclick(),原生js就這樣寫的啊。
原來:
React處理事件跟在 DOM 元素上處理事件非常相似取胎。但是有一些語法上的區(qū)別:
- React 事件使用駝峰命名展哭,之前講解jsx提過湃窍,屬性都是駝峰式。而不是全部小寫匪傍。
- 通過 JSX , 你傳遞一個(gè)函數(shù)作為事件處理程序您市,而不是一個(gè)字符串。
//html
<button onclick="activateLasers()">
Activate Lasers
</button>
//react
<button onClick={activateLasers}>
Activate Lasers
</button>
- 在 React 中你不能通過返回 false(即 return false; 語句) 來阻止默認(rèn)行為役衡。必須明確調(diào)用 preventDefault茵休。
例如,要阻止鏈接打開一個(gè)新頁面的默認(rèn)行為手蝎,可以這樣寫:
//html
<a href=""http://www.baidu.com" onclick="console.log('鏈接被點(diǎn)擊'); return false">
Click me
</a>
//輸出鏈接被點(diǎn)擊榕莺,但未打開新頁面
//react
handleClick(e) {
e.preventDefault();
console.log('鏈接被點(diǎn)擊');
}
render() {
return (
<a onClick={this.handleClick}>閃動的文字</a>
)
}