⭐任務說明

😸 學習如何把元件在透過使用者觸發後而會有顯示不同的視覺變化

UI 依狀態變化

• 像是可以判斷某一個輸入欄位由使用者輸入內容之後，下方的按鈕才會顯示為可執行狀態

• 這邊就來參考官網的範例原始碼，該召喚 chatGPT 了！

• 我們先達成，輸入文字後打開送出功能鍵，並且執行後把欄位 diSabled

import { useState } from "react";

export default function Form() {
  const [answer, setAnswer] = useState("");
  const [status, setStatus] = useState("typing");

  async function doSubmit(e) {
    e.preventDefault();
    setStatus("submitting");
  }

      function doTextareaChange(e) {
    setAnswer(e.target.value);
  }

  return (
    <>
      <h2>React 大秘境 DAY 11</h2>
      <p>
        請輸入內容
      </p>
      <form onSubmit={doSubmit}>
        <textarea
          value={answer}
          onChange={doTextareaChange}
          disabled={status === "submitting"}
        />
        <br />
        <button disabled={answer.length === 0 || status === "submitting"}>
          送出
        </button>
      </form>
    </>
  );
}

• 來看看結果
  

😸 這邊做了什麼？chatGPT 幫我！

• useState 有兩個
  • answer 是用來儲存前端使用者輸入的內容
  • status 是用來追蹤表單的狀態，預設狀態為 typeing，表示是可以輸入的狀態
• 目前執行送出之後 disabled 判斷會成立，所以畫面的欄位會顯示為 disabled 狀態

😸 這樣我們就完整簡易的元件變化

共用狀態的情形

• 有時候會有共用狀態，這樣的案例通常可以用在一次只能存在一個項目或只顯示一個值
• 一樣參考官網的範例

import { useState } from 'react';

export default function Accordion() {
  const [activeItem, setActiveItem] = useState(0);
  return (
    <>
      <h2>React 大秘境 DAY 11</h2>
      <Panel
        title="About"
        isActive={activeItem === 0}
        onShow={() => setActiveItem(0)}
      >
        關於這個秘境..
      </Panel>
      <Panel
        title="Content"
        isActive={activeItem === 1}
        onShow={() => setActiveItem(1)}
      >
        oh, no, lorem lorem lorem
      </Panel>
    </>
  );
}

function Panel({
  title,
  children,
  isActive,
  onShow
}) {
  return (
    <section className="panel">
      <h3>{title}</h3>
      {isActive ? (
        <p>{children}</p>
      ) : (
        <button onClick={onShow}>
          點我顯示
        </button>
      )}
    </section>
  );
}

• 來看看結果
  

😸這邊做了什麼？magic～

• Panel 元件判斷 activeItem 來決定是否顯示
• 當使用者點選 點我顯示 功能鍵時，即會進行更新狀態

結語

😸今天學習透過給狀態，讓 UI 有更多的變化，我們下個任務見！