iT邦幫忙

2022 iThome 鐵人賽

DAY 11
0

事件處理
當我們在瀏覽網頁的時候,要注意的是網頁不是憑空出現的,是由背後複雜繁瑣的架構所構成的,那麼那些架構當中肯定會發生一些事件,當事件發生時,我們做出相對應的處理就稱為 事件處理
網頁上發生的事件很多時候就是與使用者的互動,使用者常常會對網頁做出怎麼樣的事呢?

  • 點擊
  • 滑鼠的移入,移出
  • 滑鼠的按下,放開

React 的事件處理
當我們在使用react進行事件處理的時候,有些事情需要特別注意

  1. react事件必須使用駝峰命名法,例如:onClick
  2. 通過JSX傳遞一個函數作為事件處理程序,而不是一個字符串

接下來看看幾個事件處理的範例

假設我們有一個按鈕
當點擊按鈕時會變成開
在點擊一次時會變成關

   <button onClick={this.handleClick}>
       {this.state.isToggleOn ? 'on' : 'off'}
     </button>

這時你可以看到react的if else條件句的表達方式,當然前面要先設定
this.state = {isToggleOn: true};才行

https://ithelp.ithome.com.tw/upload/images/20220921/201522204iNQCclSxY.png

這是完整的代碼,當打完程式之後,我們可以看到按鈕上的字變成on與off來回切換
https://ithelp.ithome.com.tw/upload/images/20220921/20152220tEhgyqoY0F.png
https://ithelp.ithome.com.tw/upload/images/20220921/20152220ShkwhNFJGi.png


上一篇
[DAY10]了解React State&props的實際範例
下一篇
[DAY12]React ES6介紹
系列文
進階前端網頁設計-初心者的30天React學習及應用30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言