Dropdowns in React - Select und onChange

1. Benutzerdefinierte Select-Komponente in React
2. Verwenden von JSX
3. react-select Paket

Um interaktive Anwendungen zu erstellen, müssen React-Entwickler Eingabeelemente erstellen und die Ereignisse verarbeiten. Dropdown-Formulare sind weit verbreitet und eine der nützlichsten Eingabearten. Sie ermöglichen es den Benutzern, eine der vielen Optionen auszuwählen oder standardmäßig eine auszuwählen. Sobald die Option ausgewählt ist, können wir auf ihren Wert zugreifen und ihn im Komponentenstatus speichern.

Der Hauptzweck des Auswahlformulars besteht darin, Benutzerdaten zu sammeln. Sie können die Benutzer beispielsweise bitten, ihr Geschlecht auszuwählen.

Der Zweck von Ereignishandlern besteht darin, die Aktionen der Benutzer zu verfolgen, um den Komponentenstatus zu aktualisieren. Wenn es um das Element <select/> geht, ist der Event-Handler onChange am nützlichsten, da er ausgelöst wird, wenn Benutzer eine andere <option/> auswählen.

Benutzerdefinierte Select-Komponente in React

Wenn Sie ein normales <select/>-Element mit komplexen Funktionalitäten benötigen, ist es wahrscheinlich am besten, eine separate Komponente zu erstellen. Auf diese Weise können Sie Ereignishandler einrichten, Select-Werte speichern und bei Bedarf Änderungen in der übergeordneten Komponente auslösen. Sie können auch props verwenden, um die Daten in eine benutzerdefinierte <select/>-Komponente einzugeben. Schauen wir uns ein einfaches Beispiel an:

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>
    );
  }
}

Dies ist eine sehr grundlegende Komponente, die die Hauptfunktionalitäten des Elements <select> kapselt. Benutzer können eine der Optionen auswählen, und die Zustandseigenschaft selectedValue speichert den Wert ihrer Wahl.

Beachten Sie, dass das Ereignis change auf dem Element <select> auftritt, nicht auf seinen Kindern. Benutzer haben mehrere Optionen zur Auswahl, und wann immer sie ihre Wahl ändern, wird der Ereignishandler im onChange-Attribut ausgeführt, um den Komponentenstatus zu aktualisieren.

Bei jeder Zustandsänderung wird die Komponente neu gerendert und zeigt den aktualisierten Wert im Text <h1> an. Probieren Sie es selbst auf dem playcode aus.

Rendern eines Arrays von Optionen

Oft sind Komponenten viel nützlicher, wenn sie ihre Ausgabe basierend auf den über props übergebenen Daten anpassen. In unserem Beispiel haben wir eine benutzerdefinierte Komponente, die die Kernfunktionalitäten des Elements <select> enthält. Ein hartcodierter Satz von Optionen in unserem JSX-Code verfehlt jedoch den Zweck, eine benutzerdefinierte Komponente zu erstellen. Viel praktischer wäre es, eine Reihe von Optionen über props zu akzeptieren und die Optionen entsprechend zu rendern. Hier ist ein Beispiel:

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+"]
}

Dieser Ansatz gibt uns mehr Freiheit, unsere Komponente <CustomSelect> auf vielfältige Weise zu verwenden. Wenn wir ein select-Element mehrmals erstellen, müssen wir nur Options-Arrays als props übergeben. Zum Beispiel:

return (
    <div>
    ...
    <CustomSelect props=[firstArr]></CustomSelect>
    <CustomSelect props=[secondArr]></CustomSelect>
    ...
    </div>
    );

Funktionskomponenten

Unsere bisherigen Beispiele verwenden nur Klassenkomponenten. Sie können auch benutzerdefinierte Auswahlkomponenten mit Funktionen erstellen. Tatsächlich beginnen React-Entwickler seit der Einführung von Hooks, funktionale Komponenten stark zu bevorzugen. Um mehr über die Unterschiede zwischen Funktions- und Klassenkomponenten zu erfahren, lesen Sie diese Anleitung.

Verwenden von JSX

Wenn Sie <select> nur einmal verwenden müssen, können Sie das Element direkt in Ihr JSX einbinden. Falls Sie es nicht wissen, JSX ist eine spezielle Syntax für React, die der normalen HTML-Syntax sehr ähnlich sieht, Entwicklern jedoch mehr Möglichkeiten bietet, dynamische Anwendungen zu erstellen.

So würde eine JSX-Implementierung aussehen:

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 Paket

Wenn Sie nach einer fortschrittlichen Lösung suchen, sollten Sie das Paket react-select installieren, das ein benutzerdefiniertes Select mit umfangreichen Funktionen wie Autocomplete und Multiselect bietet. Schauen Sie auf der Website nach, um die Funktionen besser zu verstehen.