在 React 中獲取下拉選單的選定值
React 是一個流行的 JavaScript 框架,用於構建動態應用程式。要構建功能正常的應用程式,你必須設定響應性,以便你的應用程式響應使用者的輸入。
它可以是讓他們訂閱你的電子郵件列表的核取方塊、選擇正確答案的單選按鈕、獲取他們全名的文字欄位或任何其他型別的輸入。
本文將討論下拉選單,特別是 <select>
和 <option>
HTML 元素,如何在 JSX 中使用它們,以及如何從 React 中的下拉選單中獲取值。
在 React 中獲取下拉選單值的受控元件
React state
允許你將使用者選擇儲存為值並在整個應用程式中使用它們。從使用者輸入中獲取值並將其儲存在其內部狀態
中的元件是受控元件。
讓我們看一個簡單的應用程式,它讓使用者選擇三種水果中的一種,並將使用者的選擇顯示為文字:
export default function App() {
const [fruit, setFruit] = useState();
return (
<div>
<select id="fruits" value={fruit}
onChange={(e) => setFruit(e.target.value)}>
<option value="Apple">Apple</option>
<option value="Pear">Pear</option>
<option value="Pineapple">Pineapple</option>
</select>
<h1>Selected Fruit: {fruit}</h1>
</div>
);
}
在本例中,我們使用 useState()
掛鉤來更新狀態變數。
首先,我們必須在 <select>
元素上設定一個事件偵聽器並定義一個事件處理程式。在我們的示例中,它接受一個引數 - e
(事件的縮寫)並呼叫 setFruit()
函式。
要使用所選值設定狀態,我們從事件物件訪問 e.target.value
並將其傳遞給 setFruit()
函式。
最後,為了顯示我們的選擇,我們將狀態變數 fruit
放在大括號之間,以確保 JSX 將其解釋為 JavaScript 表示式。
你可以使用 CodeSandbox 上的程式碼。
在 React 中獲取下拉選單值的不受控制的元件
你可以使用 defaultValue
屬性來設定預設值,而不是在元件的 state
中設定 select
元素的初始值。在這種情況下,select
JSX 元素看起來像這樣:
export default function App() {
const [fruit, setFruit] = useState();
return (
<div>
<select id="fruits" defaultValue="Select fruit"
onChange={(e) => setFruit(e.target.value)}>
<option value="Apple">Apple</option>
<option value="Pear">Pear</option>
<option value="Pineapple">Pineapple</option>
</select>
<h1>Selected Fruit: {fruit}</h1>
</div>
);
}
使用這種方法,你只需更改設定和訪問 select
元素的預設值的方式。否則,一切都是一樣的:我們使用 onChange
處理程式來更新狀態。
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn