😸 學習如何把元件在透過使用者觸發後而會有顯示不同的視覺變化
像是可以判斷某一個輸入欄位由使用者輸入內容之後,下方的按鈕才會顯示為可執行狀態
這邊就來參考官網的範例原始碼,該召喚 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 幫我!
typeing
,表示是可以輸入的狀態😸 這樣我們就完整簡易的元件變化
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 有更多的變化,我們下個任務見!