傳遞概念

資料在元件中傳遞的方式都是從上到下(父傳子)，可以在元件上自定義屬性名稱，以 Object 方式傳遞下去

若想要子傳父，即向上傳遞，可以用 event(像是 onClick, onChange)

子元件設立監聽，事件發生，呼叫父元件函式(帶著子元件參數資料)

---

實現向上傳遞

子元件

const ExpensesFilter = (props) => {
  const getYear = (event) => {
    // 呼叫父層函式
    props.onChangeYearHandler(event.target.value)
  }

  return (
    <div className="expenses-filter">
      <div className="expenses-filter__control">
        <label>Filter by year</label>
        <select value={props.selected} onChange={getYear}>
          <option value="all">Show All</option>
          <option value="2022">2022</option>
          <option value="2021">2021</option>
          <option value="2020">2020</option>
          <option value="2019">2019</option>
        </select>
      </div>
    </div>
  )
}

父元件

const Expenses = (props) => {

  // 父層的函式
  const yearFilterHandler = (data) => {
    console.log(data)
  }

  // 父層函式透過自定義的onChangeYearHandler向下傳到子元件
  return (
    <Card className="expenses">
      <ExpensesFilter onChangeYearHandler={yearFilterHandler} selected={year} />
    ...
  )

---

State

如何不刷新網頁的狀態下渲染新的資料，可以使用 useState

useState 是 Hook 其中一種方法

要記得先引入 import { useState } from 'react'

將初始資料存入(initialState)，可用setState(newState)設定變化後的資料，並透過 state取得

const [state, setState] = useState(initialState)

setState(newState)

---

State 幾種變化

第一種，每個會動態改變的資料都單獨設立

第二種，以 Object 方式一起存入，但改變的時候也要連同其他資料再次帶入，以免消失

第三種，如果想要依循前一次變化後的資料再動態改變，可於 setState()裡面改用 arrow function，並將參數(這邊以 prevState)帶入

第二及第三種作法類似，但若想要使用前一次變化的資料，以第三種方式較安全也確保每次抓到的資料是最新的，渲染後才不會有問題