今天的 react 課程是說明如何檢測使用者與 web app 或 component 的互動，以及如何使用 react 根據 event 呈現不同的內容。

今天課程所使用的檔案：

App.jsx

import React from "react";

function App() {
  return (
    <div className="container">
      <h1>Hello</h1>
      <input type="text" placeholder="What's your name?" />
      <button>Submit</button>
    </div>
  );
}

export default App;

課程的最後會完成 hover 到 submit 的時候， button 顏色會變成黑色。

先在 submit button 上加上 onClick 事件

      function handleClick() {
        consol.log("Submitted");
      }

      <button
        onClick={handleClick}
      >
        Submit
      </button>

這樣在點擊按鈕時，就會在 console 印 Submitted。
我們可以延伸這樣的用法，當點擊時，把文字換掉：

      function handleClick() {
        setHeadingText("Submitted");
      }
      
      <h1>{headingText}</h1>

      <button
        onClick={handleClick}
      >
        Submit
      </button>

用 hooks 來決定渲染的文字

      const [headingText, setHeadingText] = useState("Hello");
      
      function handleClick() {
        setHeadingText("Submitted");
      }
      
      <h1>{headingText}</h1>

      <button
        onClick={handleClick}
      >
        Submit
      </button>

這一段的意思是，原本所顯示的文字是 Hello，等到 onClick 偵測到點擊就換成 setHeadingText 所指定的文字內容 Submitted。

前幾天上過的 hooks 筆記：

• [Day 60] [React] State - Hooks - useState & destructuring assignment 解構賦值
• [Day 61] [React] State - Hooks - useState Hook 練習

新增條件渲染

幾天前上課的條件渲染筆記：

• [Day 55] [React] 有 Ternary / AND operator 的條件渲染（Conditional Render）[1]
• [Day 56] [React] 有 Ternary / AND operator 的條件渲染（Conditional Render）[2]
• [Day 57] [React] 有 Ternary / AND operator 的條件渲染（Conditional Render）挑戰練習篇

我們想要滑鼠移過去時，就要變黑色背景，其他時刻就是都白色

      function handleMouseOver() {
        setMouseOver(true);
      }

      function handleMouseOut() {
        setMouseOver(false);
      }

    <button
        style={{ backgroundColor: isMousedOver ? "black" : "white" }}
        onClick={handleClick}
        onMouseOver={handleMouseOver}
        onMouseOut={handleMouseOut}
      >
        Submit
      </button>

這邊有兩個事件：

onmousemove 移動 mouse
onmouseout mouse 指標離開HTML標籤

所以會有onMouseOver={handleMouseOver}、onMouseOut={handleMouseOut}。