Entrée de plage non contrôlée

Introduction

Dans ce laboratoire, nous allons explorer la manière de créer un élément d'entrée de plage non contrôlé dans React qui permet aux utilisateurs de sélectionner des valeurs dans une plage de nombres en faisant glisser un bouton le long d'une ligne horizontale. Nous utiliserons une fonction de rappel pour passer la valeur sélectionnée au composant parent. À la fin de ce laboratoire, vous aurez une meilleure compréhension de la manière d'utiliser l'événement onChange et la propriété defaultValue dans React.

Skills Graph

Entrée de plage non contrôlée

index.html et script.js ont déjà été fournis dans la machine virtuelle. En général, vous n'avez qu'à ajouter du code à script.js et style.css.

Pour créer un curseur dans React, utilisez le composant Slider et passez les props min, max, defaultValue et onValueChange.

Dans le composant Slider, définissez le type de l'élément <input> sur "range" pour créer un curseur. Utilisez la prop defaultValue transmise par le parent comme valeur initiale du champ d'entrée non contrôlé. Utilisez l'événement onChange pour déclencher la fonction de rappel onValueChange et envoyer la nouvelle valeur au parent.

Voici le code pour le composant Slider:

const Slider = ({
  min = 0,
  max = 100,
  defaultValue,
  onValueChange,
  ...rest
}) => {
  return (
    <input
      type="range"
      min={min}
      max={max}
      defaultValue={defaultValue}
      onChange={({ target: { value } }) => onValueChange(value)}
      {...rest}
    />
  );
};

Pour rendre le composant Slider, utilisez ReactDOM.createRoot et passez la fonction de rappel onValueChange:

ReactDOM.createRoot(document.getElementById("root")).render(
  <Slider onValueChange={(val) => console.log(val)} />
);

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire Entrée de plage non contrôlée. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.