React 互動網頁範例
以下提供兩個 React 範例，皆使用 `useState` 管理狀態。
## 範例一：點擊按鈕改變文字內容
```jsx
import { useState } from "react";
function ChangeText() {
const [text, setText] = useState("原本的文字");
const handleClick = () => {
setText("文字已經被改變了！");
};
return (
<div>
<p>{text}</p>
<button onClick={handleClick}>
改變文字
</button>
</div>
);
}
export default ChangeText;
```
點擊按鈕後，`setText` 會更新 `text` 狀態，畫面上的文字也會重新渲染。
---
## 範例二：點擊按鈕改變文字顏色
```jsx
import { useState } from "react";
function ChangeTextColor() {
const [color, setColor] = useState("black");
const handleClick = () => {
setColor("blue");
};
return (
<div>
<p style={{ color: color }}>
這段文字會改變顏色
</p>
<button onClick={handleClick}>
改變文字顏色
</button>
</div>
);
}
export default ChangeTextColor;
```
也可以使用簡寫方式：
```jsx
<p style={{ color }}>
這段文字會改變顏色
</p>
```
---
## 同時展示兩個功能
```jsx
import { useState } from "react";
function App() {
const [text, setText] = useState("Hello React");
const [color, setColor] = useState("black");
return (
<div>
<p style={{ color }}>{text}</p>
<button onClick={() => setText("文字內容已更新")}>
改變文字內容
</button>
<button onClick={() => setColor("red")}>
改變文字顏色
</button>
</div>
);
}
export default App;
```
相關學習地圖、教學課程
F2E 網站前端工程