iT邦幫忙

2023 iThome 鐵人賽

DAY 11
0

⭐任務說明

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

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>
    </>
  );
}
  • 來看看結果
    img

😸 這邊做了什麼?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>
  );
}

  • 來看看結果
    img

😸這邊做了什麼?magic~

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

結語

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


上一篇
DAY 10 - 多次更新的狀態
下一篇
DAY 12 - 狀態的保留與重置
系列文
30 天大冒險:新手勇闖 React 大秘境30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言