在 React 中獲取下拉選單的選定值

1. 在 React 中獲取下拉選單值的受控元件
2. 在 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 處理程式來更新狀態。