React 中的下拉選單 - Select 和 onChange

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. React 中的自定義選擇元件
  2. 使用 JSX
  3. react-select
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 Tchigladze avatar Irakli Tchigladze avatar

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

相關文章 - React Dropdown