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的名字撞衫。