Composant d’entrée ReactJS UI Ant Design

Afficher la discussion

Améliorer l’article

Enregistrer l’article

J’aime l’article

Afficher la discussion

Améliorer l’article

Enregistrer l’article

J’aime l’article

Ant Design Library a ce composant pré-construit, et il est également très facile à intégrer. Le composant d’entrée est utilisé pour créer un le widget de base pour obtenir l’entrée de l’utilisateur est un champ de texte. Nous pouvons utiliser l’approche suivante dans ReactJS pour utiliser le composant d’entrée Ant Design.

Accessoires d’entrée :

  • addonAprès : Il est utilisé pour indiquer le texte de l’étiquette affiché après le champ de saisie.
  • addonAvant : Il est utilisé pour désigner le texte de l’étiquette affiché avant le champ de saisie.
  • AutoriserEffacer : Il est utilisé pour supprimer le contenu d’entrée avec une icône claire s’il est défini sur true.
  • bordé: Il est utilisé pour indiquer s’il a un style de bordure ou non.
  • valeur par défaut: Il est utilisé pour désigner le contenu d’entrée initial.
  • désactivé: Il est utilisé pour indiquer si l’entrée est désactivée ou non.
  • identifiant: Il est utilisé pour indiquer l’ID pour l’entrée.
  • longueur maximale: Il est utilisé pour indiquer la longueur maximale.
  • préfixe: Il est utilisé pour désigner l’icône de préfixe pour l’entrée.
  • Taille: Il est utilisé pour indiquer la taille de la zone de saisie.
  • suffixe: Il est utilisé pour désigner l’icône de suffixe pour l’entrée.
  • taper: Il est utilisé pour indiquer le type d’entrée.
  • évaluer: Il est utilisé pour indiquer la valeur du contenu d’entrée.
  • sur le changement: C’est la fonction de rappel qui est déclenchée lorsque l’entrée de l’utilisateur change.
  • onPressEnter : C’est la fonction de rappel qui est déclenchée lorsque la touche Entrée est enfoncée.

Accessoires Input.TextArea :

  • AutoriserEffacer : Il est utilisé pour supprimer le contenu d’entrée avec une icône claire s’il est défini sur true.
  • autoSize : Il est utilisé pour désigner la fonction de dimensionnement automatique de la hauteur.
  • bordé: Il est utilisé pour indiquer s’il a un style de bordure ou non.
  • valeur par défaut: Il est utilisé pour désigner le contenu d’entrée initial.
  • longueur maximale: Il est utilisé pour indiquer la longueur maximale.
  • showCount : Il est utilisé pour indiquer si l’affichage du texte compte ou non.
  • évaluer: Il est utilisé pour indiquer la valeur du contenu d’entrée.
  • onPressEnter : C’est la fonction de rappel qui est déclenchée lorsque la touche Entrée est enfoncée.
  • onResize : C’est la fonction de rappel qui est déclenchée lorsque le redimensionnement se produit.

Accessoires Input.Search :

  • bouton enter : Il est utilisé pour indiquer s’il faut afficher ou non un bouton d’entrée après une entrée.
  • Chargement en cours: Il est utilisé pour indiquer s’il faut afficher la boîte de recherche avec effet de chargement ou non.
  • surRecherche : C’est la fonction de rappel qui est déclenchée lorsque vous appuyez sur la touche Entrée ou cliquez sur l’icône de recherche, l’icône d’effacement.

Accessoires Input.Group :

  • compact: Il est utilisé pour indiquer s’il faut utiliser le style compact ou non.
  • Taille: Il est utilisé pour indiquer la taille des champs d’entrée inclus.

Accessoires Input.Password :

  • iconRender : Il est utilisé pour le bouton bascule personnalisé.
  • bascule de visibilité : Il est utilisé pour indiquer s’il faut afficher ou non le bouton bascule.

Méthodes d’entrée :

  • se brouiller(): Cette fonction est utilisée pour supprimer la mise au point.
  • se concentrer(): Cette fonction est utilisée pour obtenir le focus.

Création de l’application React et installation du module :

  • Étape 1: Créez une application React à l’aide de la commande suivante :

    npx create-react-app foldername
  • Étape 2: Après avoir créé votre dossier de projet, c’est-à-dire le nom du dossier, déplacez-vous dessus à l’aide de la commande suivante :

    cd foldername
  • Étape 3: Après avoir créé l’application ReactJS, installez le obligatoire module à l’aide de la commande suivante :

    npm install antd

Structure du projet : Cela ressemblera à ce qui suit.

ProjectStructure

Structure du projet

Exemple: Maintenant, écrivez le code suivant dans le App.js dossier. Ici, App est notre composant par défaut où nous avons écrit notre code.

App.js

import React, { useState } from 'react'

import "antd/dist/antd.css";

import { Input } from 'antd';

 

export default function App() {

 

  const [name, setName] = useState('')

 

  return (

    <div style={{

      display: 'block', width: 700, padding: 30

    }}>

      <h4>ReactJS Ant-Design Input Component</h4>

      <>

        <Input

          placeholder="Enter your Name"

          onChange={(e) => setName(e.target.value)}

        />

      Name: {name}

      </>

    </div>

  );

}

Étape pour exécuter l’application : Exécutez l’application à l’aide de la commande suivante à partir du répertoire racine du projet :

npm start

Production: Ouvrez maintenant votre navigateur et accédez à http://localhost:3000/vous verrez la sortie suivante :

ReactApp3

Référence: https://ant.design/components/input/

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *