React學(xué)習(xí)筆記之事件處理（二）
更新時(shí)間：2017年07月02日 10:02:33 作者：Zhang Xiao
這篇文章主要跟大家介紹了關(guān)于React中事件處理的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)React具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。
之前已經(jīng)給大家介紹了React中的條件渲染（傳送門(mén)），本文將給大家關(guān)于React中事件處理的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，下面來(lái)一起看看詳細(xì)的介紹：
React的事件處理和DOM的事件處理是很相似的，只是有一些語(yǔ)法上的區(qū)別：
- React的事件名是駝峰的，不是小寫(xiě)的
- 在JSX語(yǔ)法中，你傳遞一個(gè)fucntion作為時(shí)間處理器，而不是一個(gè)string
舉個(gè)例子：
<button onClick={activateLasers}>
Activate Lasers
</button>
而且如果你想拿到事件對(duì)象event，這個(gè)對(duì)象是React按照w3c標(biāo)準(zhǔn)完成的，所以不用擔(dān)心瀏覽器的兼容性，可以像如下這樣：
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" rel="external nofollow" onClick={handleClick}>
Click me
</a>
);
}
如果用ES6的class寫(xiě)法可以像如下一樣：
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// 這個(gè)`this`綁定是有必要的，用來(lái)讓this可以在回調(diào)中被正確指向React組件的實(shí)例對(duì)象
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);
還有兩種方式可以避免寫(xiě)顯式bind(this) ，但是都不推薦這么用啊~所以就不再贅述~
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了react中JSX的注意點(diǎn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
一個(gè)路由就是一個(gè)映射關(guān)系(key:value),key為路徑, value可能是function或component,本文給大家介紹React 路由react-router-dom詳解,感興趣的朋友跟隨小編一起看看吧2024-01-01
React Fiber中面試官最關(guān)心的技術(shù)話題
這篇文章主要為大家介紹了React Fiber中面試官最關(guān)心的技術(shù)話題解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
解決配置setupProxy.js代理,頁(yè)面報(bào)錯(cuò)404問(wèn)題
這篇文章主要介紹了解決配置setupProxy.js代理,頁(yè)面報(bào)錯(cuò)404問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
React?UI組件庫(kù)之快速實(shí)現(xiàn)antd的按需引入和自定義主題
react入門(mén)學(xué)習(xí)告一段路,下面這篇文章主要給大家介紹了關(guān)于React?UI組件庫(kù)之快速實(shí)現(xiàn)antd的按需引入和自定義主題的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
關(guān)于React中setState同步或異步問(wèn)題的理解
相信很多小伙伴們都一直在疑惑，setState 到底是同步還是異步。本文就詳細(xì)的介紹一下React中setState同步或異步問(wèn)題，感興趣的可以了解一下2021-11-11
這篇文章主要為大家介紹了useCallback和useMemo的正確用法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
react-router中Link標(biāo)簽和a標(biāo)簽有什么區(qū)別
本文主要介紹了react-router中Link標(biāo)簽和a標(biāo)簽有什么區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06
這篇文章主要介紹了React Hooks常用鉤子及基本原理,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了React key值的作用和使用詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08