React 之事件觸發

到現在為止我們使用了 React 做了許多 Component，並且可以生成一個頁面，但是我們現在就只能做出一個靜態的頁面而已，但是我們也知道 JavaScript，可以藉由操作 DOM 元素，來讓你的網頁動起來，以原生的 JavaScript 來說你可能需要使用 document.queryselector document.getElemnetByid，先去選取到你所指定的 DOM 元素，之後在加上所選定的 DOM 元素加上事件監聽器 addEventListener() ，再去依照事件的不同，去做出你想要完成的行為

但是 React 提供了更加方便的方法，就讓我們看看 React 是怎麼做的

我們先重新創造一個 React 專案，在終端機執行npx create-react-app
並且將 src/App.js 改成這樣

function App() {
  let title = "hi i'm title"

  const clickHandler = () => {
    console.log(title);
  }
  
  return (
    <div>
      <h1>{title}</h1>
      <button onClick={clickHandler}>Click me!!</button>
    </div>
  );
}

export default App;

終端機執行 npm start 會看到畫面是這樣的

大家注意到這一行了嗎？

<button onClick={clickHandler}>Click me!!</button>

或者你也可以寫成這樣

<button onClick={() => {console.log(title);}}>Click me!!</button>

這就是 React 觸發事件的方式，你可以在所要操做的 HTML 標籤上加上onClick 的事件，然後我們用 {} 傳入一個變數 clickHandler 他是一個 function，所以你只要點擊他就會執行這個 function 像是這樣，或是執行一個 function 像上面這樣

在 react 中有許多事件，可是規則都是 on 開頭，後面的單字第一個要大寫
像是 onFocus, onBlur, onClick

知道了這點之後，我們將 clickHandler 改寫成這樣，來改變我們的
title 變數吧

const clickHandler = () => {
	let title = "hi i'm title after click !!"
	console.log(title);
}

執行下去發現，欸！！！？？？，我的畫面怎麼沒有改變？？？
打開開發者工具看看

有執行這個 clickHandler 這個 funciotn 阿～
那怎麼沒有改變

因為 React 渲染畫面只會在一開始載入程式碼的時候

以我們這個專案為例，一開始從 src/index.js 進入，碰到了<App /> 這個元件，這個 <App /> 元件，本質上就是一個 function，那他回傳了什麼？就是 JSX ，也就是我們畫面上呈現的樣子，到此為止 React 就結束了他的渲染，後面不管在改變什麼變數，React 是都不會理會的，也不會重新執行 App 這個元件 (也就是 function)

那我們該如何重新渲染畫面呢，也就是讓 React 重新執行這個 function呢？

那就是 useState

useState 我的超人

useState 是 react 的一個 function，所以我們要將它 import 到我們想要利用他的檔案，我們先將App.js 改寫成這樣

// src/App.js
import { useState } from 'react'

function App() {
  const [title, setTitle] = useState("hi i'm title")

  const clickHandler = () => {
    setTitle("after click hi i'm title !!!!")
  }
  
  return (
    <div>
      <h1>{title}</h1>
      <button onClick={clickHandler}>Click me!!</button>
    </div>
  );
}

export default App;

並且我們看到這行

const [title, setTitle] = useState("hi i'm title")

在這個陣列中 [title, setTitle]，title 代表一個變數，setTitle 則是一個 function

而 useState 後面括號中的值，代表 title 的初始值，所以一開始我的畫面才會顯示 "hi i'm title"

慣例則是 [變數名, set變數名(注意開頭要大寫)] = useState(初始值)

而在這個例子中 setTitle 則會告訴 React，必須重新執行這個 App.js

這是我們在按下 button 就會看到畫面改變了，

小結

Hook 是 React 16.8 中增加的新功能

今天介紹了 React Hook 中的 useState，還有許多 HOOK 還等著我們去使用，明天將會繼續下去～ 感謝大家