KendoReact: Personnalisation des composants

Bienvenue dans notre série Bien démarrer avec KendoReact ! Dans la quatrième entrée de cette série, Eric Bishard explique comment personnaliser le composant Grille KendoReact dans une application React. Découvrez ce que KendoReact peut faire pour vous, développeur de React!

Retour au troisième post de la série.

La première chose que nous allons examiner est la NumericTextBox. . Nous avons d'abord DropdownList mais nous avons déjà ajouté les données pour cette liste.

Notre NumericTextBox ne recherche pas exactement ce que nous souhaitons. Hors de la boîte, il n'y a aucune restriction sur les nombres qui peuvent être utilisés, y compris les nombres négatifs et les nombres décimaux. Nous ne pouvons pas manger une quantité négative de fruits et de légumes. Autant de fois que je veux effectuer mes tâches à mi-chemin, nous ne voulons pas que la valeur soit un nombre décimal. Cette valeur deviendra un ensemble de boutons radio pour chaque habitude que nous avons créée, elle doit donc être un nombre entier.

La première chose à faire est le formatage. Pour définir le format afin qu'il n'autorise pas les décimales, définissez une entrée d'accesseur (format ) sur 0. Vous pouvez choisir un autre format. Par exemple, vous pouvez ajouter C pour formater l’entrée en devise. 0 est tout ce dont nous avons besoin.

Dans la documentation de NumericTextBox vous pouvez explorer tous les types de formats. Il y a aussi une API que vous pouvez parcourir et vérifier toutes les manières de personnaliser cette entrée.

Ensuite, nous devons régler min de sorte que nos utilisateurs ne puissent pas entrer. tous les nombres négatifs, et juste pour le plaisir de le faire, nous allons également régler max sur 22.

Maintenant que nous avons la NumericTextBox configurée, exécutons l'application. Avec la navigation au clavier intégrée, nous pouvons augmenter ou réduire le montant avec les touches fléchées tant que le nombre est compris entre 1 et 22.

Ensuite, nous voulons pouvoir cliquer sur le bouton Ajouter et créer une nouvelle habitude. . Pour que cela fonctionne, nous devrons ajouter des écouteurs d'événements à nos entrées et un bouton pour appeler les gestionnaires qui mettront à jour notre application, créant ainsi une liste d'habitudes saines.

Avant de commencer, ajoutons quelques informations à notre état: habitName habitId habitIteration et un éventail d'habitudes . Notre objet d'état doit être mis à jour comme suit:

 this.state = {
   données: nutrition,
   habitId: 0,
   habitName: '',
   habitIteration: 0,
   habitudes: [],
   habitudesOptions: [
     'Drink 1 cup of water',
     '1 Hour of Coding',
     '10 pushups',
     'Eat Your Fruits and veggies',
     '1 hour of Reading',
     '10 minutes of Meditation',
   ]
 } 

Nous avons donc ajouté un habitName avec une chaîne vide (intentionnellement laissée en blanc) et un habitId réglé sur 0 . Nous l'utilisons pour définir une clé dont nous avons besoin pour chaque élément de la liste. Nous avons ensuite ajouté une habitIteration avec un état initial égal à zéro. Enfin, nous ajoutons un champ habitudes initialisé sous la forme d'un tableau vide.

Rappelez-vous, nous ne faisons que du prototypage. Comprenez que garder tout notre état dans le fichier App.js et mettre à jour manuellement l'état n'est certainement pas quelque chose que vous voulez faire dans une application de production évolutive, mais mon intention est de vous enseigner les commandes de Kendo, pas de construction une application web de production solide. Rappelez-vous simplement que dans une application Web réelle, vous souhaitez incorporer une stratégie de gestion d'état et / ou rendre notre application modulaire en divisant l'interface utilisateur et la logique en plusieurs services, conteneurs et composants de présentation.

fonctions de gestionnaire. Nous allons créer une fonction handleNameChange qui prend l'événement de DropDownList comme argument. Lorsque cette fonction est déclenchée, nous setState () changeons le nom de notre habitude. Nous allons le définir sur event.target.value . Nous allons faire la même chose avec handleIterationChange () . Copiez le code des gestionnaires ci-dessous dans votre fichier App.js juste sous le constructeur.

 handleNameChange = (event) => {
  this.setState ({habitName: event.target.value})
}
handleIterationChange = (event) => {
  this.setState ({habitIteration: event.target.value})
} 

Maintenant que nous avons les fonctions de gestionnaire pour nos écouteurs d'événement, nous pouvons ajouter l'écouteur de modification à la liste déroulante, ainsi qu'une zone de texte numérique ainsi que l'événement onClick qui capturera notre soumission de formulaire pour ajouter une habitude. Je souhaite également ajouter une classe primaire au bouton pour la faire apparaître un peu plus sur la page (paramètre primary = {true} ). Avec ces modifications, chaque modification des entrées doit être immédiatement reflétée dans l'état, ce qui actualisera notre composant. Mettons à jour les entrées et le bouton avec les modifications suivantes:

 


  Ajouter une habitude
 

Nous aurons également besoin d'une liste d'habitudes à ajouter ainsi que d'un gestionnaire pour le bouton de l'événement Clic . Ajoutons un écouteur d'événement à notre bouton juste après l'implémentation d'une fonction de gestionnaire handleAddHabit () .

 handleAddHabit = (event) => {
  this.setState ({
    habitudes: this.state.habits.concat ([{
      key: this.state.habitId,
      name: this.state.habitName,
      iterations: this.state.habitIteration
    }]),
    habitId: this.habitId ++
  });
} 

Puisque nous avons des habitudes comme un tableau, la première fois que nous ajoutons une habitude, cela ajoutera simplement cette habitude au tableau, mais pour chaque opération suivante, nous voudrons concaténer la nouvelle habitude étant ajouté avec les habitudes précédentes déjà existantes dans le tableau. Nous ajoutons également un itérateur habitId afin que chaque habitude ait une clé unique.

Nous avons une balise vide div en haut de notre page avec un en-tête qui dit: "Choses saines" – c'est là que nous allons mettre notre liste de bonnes habitudes. Copiez le code ci-dessous et remplacez le contenu vide de cette div .

 

  {this.state.habits.map ((habit)) => [
    

      
 {habit.name} 
      

         {[... Array (habit.iterations)]. Map ((itération, index) => {
          retour 
        })}
      
    
  ])}
 

Nous devrions maintenant voir notre liste renseignée avec les informations que l'utilisateur a entrées dans nos entrées et un bouton radio pour le nombre de fois où il souhaite utiliser cette habitude. De cette façon, ils peuvent les cocher comme ils vont. Vous trouverez ci-dessous un aperçu de ce que vous devriez voir à ce stade:

Nous allons ensuite travailler à la création de notre grille. non seulement un peu mieux, mais aussi une fonctionnalité en filtrant. Comme nous avons cette grille sans fin, nous allons définir la hauteur en ajoutant le code ci-dessous à la grille Nous économisons cela, et nous n’avons plus la grille longue et folle.

Nous allons maintenant ajouter le filtrage pour notre grille. Si vous vous en souvenez, dans la section où nous . ] a installé la grille et les dépendances associées l’un des paquets que nous avons installés était un module de requête de données que nous avons installé dans le seul but de filtrer nos données dans notre grille. Vous voyez, je pensais à l’avenir pour vous! J'ai dit, il est déjà disponible pour nous via le paquet kendo-data-query, importons-le!

 import {filterBy} from '@ progress / kend o-data-query '; 

Ceci mis en place, nous pouvons créer une constante juste au-dessus de notre initialisation d'état dans le constructeur. Cela servira de filtre initial (état par défaut du filtre), lors du premier chargement de notre application:

 const initialFilter = {
  logique: 'et',
  filtres: [{
    field: 'Description', 
    operator: 'contains',
    value: 'Apple'
  }]
}; 

Tout ce que nous avons configuré dans cet initialFilter est un paramètre sur lequel l'utilisateur aura le contrôle lorsqu'il interagira avec notre grille. L'API et des exemples plus importants à cet égard se trouvent dans le document Data Query Overview . En bref, nous spécifions que notre logique est et par opposition à ou . Le champ (le champ d'élément de données auquel l'opérateur de filtre est appliqué) sera Description (notre première colonne de la grille) et notre opérateur à des fins de comparaison will be contient où la valeur de description est "Apple".

Pendant que nous barbotons dans le constructeur, nous devons également modifier le state.data . L'affectation doit provenir d'une fonction qui prend initialFilter comme argument renvoyant un ensemble de données où initialFilter lui a déjà été appliqué. Après avoir effectué ce changement, notre objet d'état ressemblera à ceci:

 this.state = {
  données: this.getNutrition (initialFilter),
  filtre: initialFilter,
  habitId: 0,
  habitName: '',
  habitIteration: 0,
  habitudes: [],
  habitudesOptions: [
    'Drink 1 cup of water',
    '1 Hour of Coding',
    '10 pushups',
    'Eat Your Fruits and veggies',
    '1 hour of Reading',
    '10 minutes of Meditation',
  ]
} 

Etant donné que nous avons introduit une nouvelle fonction que nous n'avons pas encore créée, faisons-le maintenant.

 getNutrition = (filter) => filterBy (nutrition, filter); 

Cela suffit pour obtenir l'initiale l'état de la grille fonctionne, mais nous souhaitons également que la grille elle-même puisse être filtrée par le biais d'interactions utilisateur. Pour que cela fonctionne, passons au composant de notre fichier JSX et définissons quelques éléments supplémentaires. Mettez à jour la balise de début comme suit:

Nous avons défini ici filtrable à vrai permettant le filtrage du composant, filtre . qui indiquera state.filter et nous aurons également besoin d'un gestionnaire pour l'événement change filterChange . Continuons et définissons cela car après avoir ajouté le code ci-dessus, nous avons maintenant une erreur.

 handleFilterChange = (event) => {
  this.setState ({
    données: this.getNutrition (event.filter),
    filtre: event.filter
  });
} 

Donc, si nous examinons notre application, nous avons maintenant une grille avec une fonctionnalité de filtrage. Par exemple, si nous changeons Apple dans notre filtre éditable en Orange nous verrons ce changement prendre effet immédiatement dans notre grille de filtrage des descriptions d’aliments contenant le mot Orange .

Continuez avec le cinquième post de la série - ce n’est pas encore en direct, mais vous pourrez le trouver bientôt!