iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 11
0
自我挑戰組

轉職道上的萌芽人生 − 自學程式開發ing系列 第 11

Day 11- 190927學習筆記 ReactJS(下)

  • 分享至 

  • xImage
  •  

提醒:由於看到這系列鐵人訂閱人數漸漸變多,標記一下這些內容是在「非常萌新時期」所寫,更多技術內容請參考我的 Github,歡迎跟我一起討論 ^ ^


React Events

  • 可寫入HTML的Events,但寫法略有不同:
    • 以駝峰式書寫
    • {}書寫Event觸發後的動作
    • this 綁定為該component的method
      HTML:onclick="function()"
      React:onClick={this.function}
  • 以 arrow function 書寫:
    • 將 method 的 this 綁定在 component
    • 觸發的動作若需給參數,可直接包在 arrow function 中

React Forms

  • form data 通常由 component掌控,並儲存在 state 中。
  • 需先初始化 state
  • event.target.property 來撈event中的資訊,例:event.target.name、event.target.value。
  • this.setState({[event.target.name]:event.target.value}) 來更新 input 提供的值。(注意屬性名稱若為變數須以[]包住)
  • 可用屬性 value ,來提供內容。
    例:<textarea value={this.state.des} />

React CSS

  • inline styling:
    • object 的方式呈現 style
    • 屬性須以駝峰式書寫
      HTML:style="background-color: red"
      React:style={{backgroundColor: "red"}}
  • CSS stylesheet:
    • import './mystyle.css' 方式輸入一般CSS文件
  • CSS Modules:
    • import styles from './mystyle.module.css' 方式輸入 CSS Modules
    • 只有輸入該 module 的 component 會套用,因此無須擔心selector的名字撞衫。

上一篇
Day 10- 190926學習筆記 ReactJS(中)
下一篇
Day 12- 190928學習筆記 Node.js Express 環境設定
系列文
轉職道上的萌芽人生 − 自學程式開發ing30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言