Maison  >  Article  >  interface Web  >  Comment implémenter la recherche par conditions en réaction

Comment implémenter la recherche par conditions en réaction

藏色散人
藏色散人original
2022-12-28 16:08:302175parcourir

Comment implémenter la recherche conditionnelle dans React : 1. Définissez un objet dans l'état ; 2. Définissez l'événement de clic de la liste déroulante sur Change pour recevoir et enregistrer l'ID correspondant pour chaque liste déroulante sélectionnée ; 3. Attachez l'objet ; à l'interface Utilisez simplement les paramètres de la requête.

Comment implémenter la recherche par conditions en réaction

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Comment implémenter la recherche par conditions en réaction ?

react design pro implémente des données de requête multi-conditions

1. Description :

Pour le système de gestion backend, lors de l'écriture de l'interface métier, les données de requête conjointes avec plusieurs conditions sont l'exigence commerciale la plus fondamentale. Généralement, multi. -les requêtes conditionnelles sont l'ID ou une autre valeur transmise dans le champ correspondant.

Deuxièmement, l'effet d'interface obtenu :

Trois idées d'implémentation :

Définissez d'abord un objet pour recevoir l'ID correspondant pour chaque liste déroulante sélectionnée, puis enfin attachez l'objet aux paramètres de requête d'interface Can.查 Par exemple : Le format de données requis par mon interface de requête ici

R
{ merchantId: "", page: 1, limit: 15, departDate: "", lineId: "", driverId: "", carId: "" }
E

4. Implémentation du code :

1. Définissez d'abord un objet dans l'état :

2. Définissez la liste déroulante, cliquez sur l'événement onchange

3. Affectation (seul le code de la liste déroulante fournisseur est affiché ici, les autres listes déroulantes sont les mêmes) :

Comment implémenter la recherche par conditions en réactionEnfin, obtenez les résultats correspondants et effectuez les requête, et une requête multi-conditions est implémentée.

5. Résumé

Ici, j'utilise setState pour attribuer dynamiquement des valeurs aux éléments d'objet. C'est la méthode à laquelle je peux penser pour le moment. Je ne sais pas s'il existe un meilleur moyen. que quelqu'un peut m'apprendre.

Apprentissage recommandé : "

Tutoriel vidéo React

"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn