Listes déroulantes dans React - Select et onChange

1. Composant Select personnalisé dans React
2. Utilisation de JSX
3. Paquet react-select

Pour créer des applications interactives, les développeurs React doivent créer des éléments d’entrée et gérer les événements. Les formulaires déroulants sont répandus et constituent l’un des types de saisie les plus utiles. Ils permettent aux utilisateurs de sélectionner l’une des nombreuses options ou d’en sélectionner une par défaut. Une fois l’option sélectionnée, nous pouvons accéder à sa valeur et la stocker dans l’état composant.

L’objectif principal du formulaire de sélection est de collecter les données des utilisateurs. Par exemple, vous pouvez demander aux utilisateurs de sélectionner leur sexe.

Le but des gestionnaires d’événements est de suivre les actions des utilisateurs pour mettre à jour l’état du composant. En ce qui concerne l’élément <select/>, le gestionnaire d’événements onChange est le plus utile car il se déclenche lorsque les utilisateurs sélectionnent un autre <option/>.

Composant Select personnalisé dans React

Si vous avez besoin d’un élément <select/> normal avec des fonctionnalités complexes, il est probablement préférable de créer un composant séparé. De cette façon, vous pouvez configurer des gestionnaires d’événements, stocker des valeurs de sélection et, si nécessaire, déclencher des modifications dans le composant parent. Vous pouvez également utiliser des props pour alimenter les données dans un composant <select/> personnalisé. Regardons un exemple simple :

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

Il s’agit d’un composant très basique qui encapsule les principales fonctionnalités de l’élément <select>. Les utilisateurs peuvent sélectionner l’une des options et la propriété d’état selectedValue stockera la valeur de leur choix.

Notez que l’événement change se produit sur l’élément <select>, pas sur ses enfants. Les utilisateurs ont le choix entre plusieurs options et chaque fois qu’ils modifient leur choix, le gestionnaire d’événements dans l’attribut onChange sera exécuté pour mettre à jour l’état du composant.

Chaque fois que l’état change, le composant sera re-rendu et affichera la valeur mise à jour dans le texte <h1>. Essayez-le vous-même sur le playcode.

Rendu d’un tableau d’options

Souvent, les composants sont beaucoup plus utiles s’ils ajustent leur sortie en fonction des données transmises via les props. Dans notre exemple, nous avons un composant personnalisé qui intègre les fonctionnalités de base de l’élément <select>. Cependant, avoir un ensemble d’options codées en dur dans notre code JSX va à l’encontre de l’objectif de créer un composant personnalisé. Il serait beaucoup plus pratique d’accepter un tableau d’options via des props et de rendre les options en conséquence. Voici un exemple :

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

Cette approche nous donne plus de liberté pour utiliser notre composant <CustomSelect> de différentes manières. Si nous créons un élément select plusieurs fois, nous n’aurons besoin de passer que des tableaux d’options en tant qu’accessoires. Par exemple:

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

Composants fonctionnels

Jusqu’à présent, nos exemples n’utilisent que des composants de classe. Vous pouvez également créer des composants de sélection personnalisés avec des fonctions. En fait, depuis l’introduction des hooks, les développeurs de React commencent à privilégier fortement les composants fonctionnels. Pour en savoir plus sur les différences entre les composants fonctionnels et de classe, lisez ce guide.

Utilisation de JSX

Si vous devez utiliser <select> une seule fois, vous pouvez inclure l’élément directement dans votre JSX. Au cas où vous ne le sauriez pas, JSX est une syntaxe spéciale pour React, qui ressemble beaucoup à la syntaxe HTML normale, mais donne aux développeurs plus de pouvoir pour créer des applications dynamiques.

Voici à quoi ressemblerait une implémentation 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>
    );
  }
}

Paquet react-select

Si vous recherchez une solution avancée, envisagez d’installer le package react-select, qui fournit un Select personnalisé avec des fonctionnalités étendues telles que la saisie semi-automatique et la sélection multiple. Consultez leur site Web pour mieux comprendre les fonctionnalités.