React學(xué)習(xí)筆記之事件處理（二）
更新時(shí)間：2017年07月02日 10:02:33 作者：Zhang Xiao
這篇文章主要跟大家介紹了關(guān)于React中事件處理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)React具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。
之前已經(jīng)給大家介紹了React中的條件渲染（傳送門），本文將給大家關(guān)于React中事件處理的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面來一起看看詳細(xì)的介紹：
React的事件處理和DOM的事件處理是很相似的，只是有一些語法上的區(qū)別：
- React的事件名是駝峰的，不是小寫的
- 在JSX語法中，你傳遞一個(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寫法可以像如下一樣：
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// 這個(gè)`this`綁定是有必要的，用來讓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')
);
還有兩種方式可以避免寫顯式bind(this) ，但是都不推薦這么用啊~所以就不再贅述~
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
詳解React中setState回調(diào)函數(shù)
這篇文章主要介紹了詳解React中setState回調(diào)函數(shù)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了淺談從React渲染流程分析Diff算法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
React中useState的使用方法及注意事項(xiàng)
useState通過在函數(shù)組件里調(diào)用它來給組件添加一些內(nèi)部state,下面這篇文章主要給大家介紹了關(guān)于React中useState的使用方法及注意事項(xiàng)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
這篇文章主要介紹了React如何動(dòng)態(tài)控制偽元素樣式問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
React可以說是前端的先驅(qū)者,它總是會(huì)引領(lǐng)整個(gè)前端的潮流。 但我們?cè)谑褂靡步?jīng)常會(huì)遇到錯(cuò)誤，下面這篇文章主要給大家介紹了關(guān)于React編程中需要注意的兩個(gè)錯(cuò)誤，需要的朋友可以參考下2021-05-05
淺談webpack+react多頁面開發(fā)終極架構(gòu)
這篇文章主要介紹了淺談webpack+react多頁面開發(fā)終極架構(gòu)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
React Native可定制底板組件Magic Sheet使用示例
這篇文章主要為大家介紹了React Native可定制的底板組件Magic Sheet使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
React onClick/onChange傳參(bind綁定)問題
這篇文章主要介紹了React onClick/onChange傳參(bind綁定)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
使用Node搭建reactSSR服務(wù)端渲染架構(gòu)
這篇文章主要介紹了使用Node搭建reactSSR服務(wù)端渲染架構(gòu),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
React?Native中原生實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入的示例詳解
在React?Native社區(qū)中,原生動(dòng)態(tài)導(dǎo)入一直是期待已久的功能,在這篇文章中,我們將比較靜態(tài)和動(dòng)態(tài)導(dǎo)入,學(xué)習(xí)如何原生地處理動(dòng)態(tài)導(dǎo)入,以及有效實(shí)施的最佳實(shí)踐,希望對(duì)大家有所幫助2024-02-02