React 中的下拉選單 - Select 和 onChange
要建立互動式應用程式，React 開發人員必須建立輸入元素並處理事件。下拉表單很普遍，是最有用的輸入型別之一。它們允許使用者選擇眾多選項之一或預設選擇一個。一旦選擇了選項，我們就可以訪問它的值並將其儲存在元件狀態中。
選擇表單的主要目的是收集使用者的資料。例如，你可能想要讓使用者選擇他們的性別。
事件處理程式的目的是跟蹤使用者更新元件狀態的操作。對於 <select/> 元素，onChange 事件處理程式是最有用的，因為它會在使用者選擇不同的 <option/> 時觸發。
React 中的自定義選擇元件
如果你需要具有複雜功能的普通 <select/> 元素，最好建立一個單獨的元件。通過這種方式，你可以設定事件處理程式、儲存選擇值，並在必要時觸發父元件中的更改。你還可以使用 props 將資料提供給自定義的 select 元件。讓我們看一個簡單的例子：
class CustomSelect extends Component {
constructor(props){
super(props)
this.state = {
selectedValue: ""
}
}
render() {
const handleChange = (e) => {
this.setState({selectedValue: e.target.value})
}
return (
<div>
<select onChange={(e) => handleChange(e)}>
<option value="1-10">1-10</option>
<option value="10-15">10-15</option>
<option value="15-20">15-20</option>
<option value="20+">20+</option>
</select>
<h1>You chose {this.state.selectedValue}</h1>
</div>
);
}
}
這是一個非常基本的元件，它封裝了 <select> 元素的主要功能。使用者可以選擇其中一個選項，selectedValue 狀態屬性將儲存他們選擇的值。
請注意，change 事件發生在 <select> 元素上，而不是它的子元素上。使用者有多個選項可供選擇，每當他們改變他們的選擇時，onChange 屬性中的事件處理程式將被執行以更新元件狀態。
每次狀態改變時，元件都會重新渲染並在 <h1> 文字中顯示更新後的值。在 playcode 上自己嘗試一下。
呈現一系列選項
如果元件根據通過 props 傳遞的資料調整其輸出，則元件通常會更有用。在我們的示例中，我們有一個自定義元件，其中包含 <select> 元素的核心功能。然而，在我們的 JSX 程式碼中使用一組硬編碼的選項違背了建立自定義元件的目的。通過 props 接受一系列選項並相應地呈現選項會更實用。下面是一個例子：
class CustomSelect extends Component {
constructor(props){
super(props)
this.state = {
selectedValue: ""
}
}
render() {
const handleChange = (e) => {
this.setState({selectedValue: e.target.value})
}
return (
<div>
<select onChange={(e) => handleChange(e)}>
{this.props.options.map(arrayItem => <option value={arrayItem}>{arrayItem}</option>)}
</select>
<h1>You chose {this.state.selectedValue}</h1>
</div>
);
}
}
CustomSelect.defaultProps = {
options: ["1-10", "10-15", "15-20", "20+"]
}
這種方法使我們可以更自由地以多種不同方式使用我們的 <CustomSelect> 元件。如果我們多次建立 select 元素，我們只需要將選項陣列作為 props 傳遞。例如：
return (
<div>
...
<CustomSelect props=[firstArr]></CustomSelect>
<CustomSelect props=[secondArr]></CustomSelect>
...
</div>
);
功能元件
到目前為止，我們的示例僅使用類元件。你還可以使用函式建立自定義選擇元件。事實上，自從引入 hooks 以來，React 開發人員開始強烈地偏愛函式式元件。要了解有關功能元件和類元件之間差異的更多資訊，請閱讀本指南。
使用 JSX
如果你只需要使用 <select> 一次，你可以直接在 JSX 中包含該元素。如果你不知道，JSX 是 React 的一種特殊語法，它看起來很像常規的 HTML 語法，但為開發人員提供了建立動態應用程式的更多能力。
這是 JSX 實現的樣子：
class App extends Component {
constructor(props){
super(props)
this.state = {
selectedValue: ""
}
}
render() {
const handleChange = (e) => {
this.setState({selectedValue: e.target.value})
}
return (
<div>
<p>Choose the size of the t-shirt</p>
<select onChange={(e) => handleChange(e)}>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
</div>
);
}
}
react-select 包
如果你正在尋找高階解決方案，請考慮安裝 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