在 React 中設定 Select 元素的預設值

1. 在 React 中使用 defaultValue 屬性設定 Select 元素的預設值
2. 在 React 中使用 react-select 庫設定 Select 元素的預設值

本文將討論 React 中的 <select> 和 <option> 元素。我們將探討如何訪問選定的值並設定預設值。

在 React 中使用 defaultValue 屬性設定 Select 元素的預設值

React 是一個基於 JavaScript 的 UI 庫，用於構建強大的 Web 應用程式。任何動態 Web 應用程式都需要接受使用者輸入並相應地更新頁面。

state 是 React 的核心功能之一，通常用於儲存來自使用者輸入的值並在必要時觸發更改。

與 HTML 不同，使用者的選擇在 selected 屬性中指定，React 使用 value 屬性代替。這樣做是為了保持所有表單和輸入元素一致。

React 中的所有受控輸入元件都將使用者選擇的值保持在狀態中。 <select> 元素，如果它是受控的，則必須將 value 屬性設定為狀態中的選定值。

要設定 <select> 元素的預設值，你可以使用 React 中的 defaultValue 屬性。讓我們看一個示例程式碼。

export default function Select() {
  const [choice, setChoice] = useState();
  return (
    <div>
      <select
        value={choice}
        defaultValue={"default"}
        onChange={(e) => setChoice(e.target.value)}
      >
        <option value={"default"} disabled>
          Choose an option
        </option>
        <option value={"one"}>One</option>
        <option value={"two"}>Two</option>
        <option value={"three"}>Three</option>
      </select>
      <h1>You selected {choice}</h1>
    </div>
  );
}

這個受控元件使用 <select> 元素上適當命名的 defaultValue 屬性設定預設值。

請注意，defaultValue 屬性的值應與選項之一的 value 屬性相同。

我們使用 onChange 處理程式來更新我們的狀態變數的值。你可以在 CodeSandbox 上檢視演示。

如果你的 <select> 元素不受控制，你可以不設定 select 元素和每個 options 的 value 屬性。你可以使用 onChange 事件處理程式來更新狀態。

在 React 中使用 react-select 庫設定 Select 元素的預設值

react-select 是一個提供自定義 Select 元件的庫，併為你提供自定義其外觀、功能等的選項。

要自定義選項，你必須提供帶有鍵值對的物件陣列；例如，我們之前示例中的選項如下。

import Select from 'react-select';

export default function select(){
    let options = [{label: "One", value: "one"}, {label: "Two", value: "two"}, {label: "Three", value: "three"}]
    return (
    	<Select options={options}
            defaultValue={{label: "Choose one", value: ""}}></Select>
    )
}

如你所見，react-select 允許我們設定預設值。只能有一個預設值，因此 defaultValue 屬性的值應該是具有 value 和 label 屬性的單個物件。

從 react-select 包匯入的 Select 元件中的所有事件處理和呈現都在後臺進行。