React 中的下拉選單 - Select 和 onChange

Irakli Tchigladze 2023年1月30日 2022年5月18日

React React Dropdown React Select

React 中的自定義選擇元件
使用 JSX
react-select 包

要建立互動式應用程式，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，具有廣泛的功能，如自動完成和多選。檢視他們的網站以更好地瞭解這些功能。

Author: Irakli Tchigladze

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

React 中的自定義選擇元件

呈現一系列選項

功能元件

使用 JSX

react-select 包

相關文章 - React Dropdown

`react-select` 包