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