在 React 中設定 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
元件中的所有事件處理和呈現都在後臺進行。
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