資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 ReactJS 中設定下拉選單的預設值？
在 Web 開發中，建立動態且響應迅速的表單是提供良好 UI/UX 的一個基本部分。ReactJS 作為最流行的用於構建使用者介面的 JavaScript 庫之一，提供了許多強大的功能來管理表單元素。這些需求之一是在下拉選單元素中設定預設值。這在您希望預選一個選項來提示使用者或某些狀態的表單中特別有用。在本文中，我們將討論如何在 ReactJS 的 `select` 元素中新增預設值，並透過程式碼片段解釋受控元件和非受控元件的實現。
先決條件
- React 基礎知識：React 元件、狀態管理和 Hook 的基本概念。如果您從未接觸過 React 並想使用它，請先閱讀文件瞭解其原理，然後查詢初學者課程。
- Node.js 和 npm：Node 6 或更高版本，以及 NPM（js 社群的包管理器），用於構建基於 Web 的前端應用程式，例如使用 Webpack 的 Angular JS 應用程式。但是，如果您已經安裝了 Node.js 和 npm（node 包管理器），那就更好了。我們可以在 Node.js 官網下載這些。
- 程式碼編輯器：您可以使用任何您熟悉的程式碼編輯器來編寫和處理 React 程式碼。
- React 應用設定：您應該已經預先配置並設定好了 React 應用程式。如果您沒有，可以使用 Create React App 命令輕鬆建立一個。
設定下拉選單預設值的方法
在 ReactJS 中處理表單選擇元素有兩種方法：使用 `useState()` 和使用 `defaultValue` 屬性。這兩種方法都有其各自的用途，根據表單的複雜性和其他要求，選擇哪種方法更合適。下面將對每種方法的基本理解進行描述。
- 使用 useState Hook：表單元素的值儲存在元件的狀態中（並透過事件處理程式更新）。這提供了更多控制和靈活性，允許您在使用者輸入任何欄位後立即呈現表單欄位的驗證狀態。一個很好的用例是根據其他欄位動態更新顯示的文字，例如：篩選與標題中的關鍵字匹配的合作伙伴關係。
- 使用 useRef Hook：在這種方法中，我們將在 `select` 元素的 `defaultValue` 屬性中設定值。然後使用 `useRef()` 來跟蹤使用者選擇的選項。
設定 React 環境
在深入研究主要程式碼之前，您需要設定好您的 React 環境。如果您沒有 React 應用程式，請使用 `create-react-app` 命令建立一個。開啟終端/命令提示符，轉到您建立 React 應用程式的資料夾，然後鍵入以下命令。此命令用於在此位置構建 React 應用程式。
npx create-react-app select-the-fruits
cd select-the-fruits
注意：您可以將名稱“select-the-fruits”替換為您專案中想要的任何名稱（根據命名約定）。
使用 useState Hook 設定預設值
受控元件允許您透過連線狀態及其值以及渲染來完全控制表單元素。下面是這種方法的直接分解：這裡我以一個包含水果列表的下拉列表為例，該下拉列表使用 ReactJS 中的 `select` 實現。選擇元素的預設值使用受控元件設定。
import React, {useState} from "react";
// import CSS file for styling
import "./App.css";
function App() {
// default value
const [selectedOption, setSelectedOption] = useState("Apple");
const handleChange = (event) => {
setSelectedOption(event.target.value);
};
return (
<div className="container">
<h1 className="title">Select Your Favorite Fruit</h1>
<select
className="styled-select"
value={selectedOption}
onChange={handleChange}
>
<option value="Apple">🍎 Apple</option>
<option value="Banana">🍌 Banana</option>
<option value="Orange">🍊 Orange</option>
<option value="Grape">🍇 Grape</option>
</select>
<p className="result">
You selected: {selectedOption}
</p>
</div>
);
}
export default App;
現在，要為程式碼新增樣式，請在 `src` 資料夾中的 `App.css` 檔案中新增以下 CSS 程式碼。
/* App.css */
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #ffffff;
padding: 20px 40px;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
width: 300px;
}
.title {
font-size: 24px;
color: #333333;
margin-bottom: 20px;
}
.styled-select {
width: 100%;
padding: 10px 15px;
border-radius: 8px;
border: 1px solid #cccccc;
background-color: #ffffff;
font-size: 16px;
color: #333333;
outline: none;
transition: all 0.3s ease;
}
.styled-select:hover {
border-color: #888888;
}
.styled-select:focus {
border-color: #007bff;
box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
}
.result {
margin-top: 20px;
font-size: 18px;
color: #555555;
}
程式碼解釋
- 狀態初始化：`useState()` 使用 “apple” 初始化 `selectedOption` 狀態。這是下拉選單中的預設選擇。React 控制此狀態以確保值始終與我們將其設定為元件值的內容相對應。
- 使用者輸入：`handleChange` 是一個事件處理程式，每當使用者選擇不同的選項時，它都會更新 `selectedOption` 狀態。`event.target` 獲取所選選項的匹配 ID 並設定相應的狀態。
- 模型值繫結：元素值繫結到我們的 `selectedOption` 狀態，每當它更改時，我們都會計算一個新的過濾列表。此繫結確保下拉選單反映我們當前狀態的內容，使 UI 和應用程式邏輯保持一致。
- 所選選項：所選選項將顯示在下拉選單下方的段落標籤中，這將為使用者提供持續的反饋，顯示即時選擇的水果。
這種受控行為在您希望根據所選選項執行某些操作（例如表單驗證或條件渲染）時特別有用。
使用 useRef Hook 設定預設值
因此，在這種方法中，我們將使用 `select` 元素本身內部的 `defaultValue` 屬性設定 `select` 的預設值。之後，我們不會使用 `useState()` 來跟蹤更改的值，而是使用 `ref` 在需要時獲取所選值。因此，透過這種方式，我們完全依賴於 `useRef()` 而不是 `useState()`，因為 `useRef()` 直接允許您訪問 DOM 元素並獲取其當前值。完整的程式碼如下所示。
import React, {useRef} from "react";
// Import the CSS file for styling
import "./App.css";
function App() {
// create a ref to access the select element
const selectRef = useRef(null);
const handleChange = () => {
// Get the selected value from the ref
const selectedValue = selectRef.current.value;
document.getElementById(
"result"
// Update the result directly in the DOM
).textContent = `You selected: ${selectedValue}`;
};
return (
<div className="container">
<h1 className="title">Select Your Favorite Fruit</h1>
<select
className="styled-select"
defaultValue="Apple"
ref={selectRef}
onChange={handleChange}
>
<option value="Apple">🍎 Apple</option>
<option value="Banana">🍌 Banana</option>
<option value="Orange">🍊 Orange</option>
<option value="Grape">🍇 Grape</option>
</select>
<p id="result" className="result">
You selected: Apple
</p>
</div>
);
}
export default App;
現在，要為程式碼新增樣式，請在 `src` 資料夾中的 `App.css` 檔案中新增以下 CSS 程式碼。CSS 檔案與上述方法相同。
/* App.css */
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #ffffff;
padding: 20px 40px;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
width: 300px;
}
.title {
font-size: 24px;
color: #333333;
margin-bottom: 20px;
}
.styled-select {
width: 100%;
padding: 10px 15px;
border-radius: 8px;
border: 1px solid #cccccc;
background-color: #ffffff;
font-size: 16px;
color: #333333;
outline: none;
transition: all 0.3s ease;
}
.styled-select:hover {
border-color: #888888;
}
.styled-select:focus {
border-color: #007bff;
box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
}
.result {
margin-top: 20px;
font-size: 18px;
color: #555555;
}
程式碼解釋
- 這部分是非受控的，因為元素的值不依賴於此狀態（`useState`）。相反，它使用 ref 直接訪問 DOM 元素，以便在選擇某些內容時獲取和設定其值。
- `handleChange()` 函式 - 當用戶從下拉主頁螢幕中選擇任何選項時觸發。它使用 ref 獲取元素的當前值。然後獲取單選按鈕中選擇的值，並將其直接放置到 ID 為 result 的段落元素中作為內容。
- 我們將這些結果段落的初始文字內容設定為“You selected: Apple”，這與我們的預設選擇選項一致。
輸出
編寫程式碼後，需要執行應用程式才能檢視輸出。完成此操作後，只需轉到 VSCode 編輯器中的終端，並編寫以下命令，然後執行應用程式，如下所示。在此 repo 中，應用程式在執行上述命令後在埠 https://:3000/ 上執行。
npm start
上述兩種方法的輸出以 GIF 格式顯示在下面。
結論
如果您使用 ReactJS，那麼應該瞭解的基本技術之一是如何在 `select` 元素中設定預設值並允許一個或多個選項預設為選定狀態。通過了解這兩種方法之間的對比，您將瞭解如何根據自己的需求實現每種方法。受控元件（`useState()` 方法）功能更強大，可以應用於複雜的表單，而非受控元件（`useRef()` 方法）在基本表單配置中應用更簡單。
0 次檢視
