ReactJS UI Ant Design Mentions Component

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 Mentions est utilisé à des fins de mention, et il est utilisé lorsque l’utilisateur a besoin de mentionner quelqu’un ou quelque chose. Nous pouvons utiliser l’approche suivante dans ReactJS pour utiliser le composant Ant Design Mentions.

Mentionne les accessoires :

  • mise au point automatique : Il est utilisé pour définir la mise au point automatique lorsque le composant est monté.
  • autoSize : Il est utilisé pour la fonction de dimensionnement automatique de la hauteur de Textarea.
  • valeur par défaut: Il est utilisé pour indiquer la valeur par défaut.
  • optionfiltre : Il est utilisé pour transmettre la logique d’option de filtre personnalisé.
  • getPopupContainer : Il est utilisé pour définir le nœud HTML de montage pour les suggestions.
  • contenu introuvable : Il est utilisé pour définir le contenu des mentions lorsqu’elles ne correspondent pas.
  • placement: Il est utilisé pour définir le placement du popup.
  • préfixe: Il est utilisé pour définir le mot-clé de préfixe de déclencheur.
  • diviser: Il est utilisé pour définir la chaîne fractionnée avant et après la mention sélectionnée.
  • validerRechercher : Il est utilisé pour la logique de recherche de déclencheur personnalisée.
  • évaluer: Il est utilisé pour définir la valeur des mentions.
  • le flou: Il s’agit d’une fonction de rappel qui est déclenchée lorsque les mentions perdent le focus.
  • sur le changement: C’est une fonction de rappel qui est déclenchée lorsque la valeur a changé.
  • onFocus : Il s’agit d’une fonction de rappel qui est déclenchée lorsque les mentions obtiennent le focus.
  • onResize : C’est une fonction de rappel qui est déclenchée lorsque Textarea se redimensionne.
  • surRecherche : C’est une fonction de rappel qui est déclenchée lorsque le préfixe est atteint.
  • surSélectionner : Il s’agit d’une fonction de rappel qui est déclenchée lorsque l’utilisateur sélectionne l’option.

Accessoires optionnels :

  • enfants: Il est utilisé pour le contenu de la suggestion
  • évaluer: Il est utilisé pour indiquer la valeur de la suggestion et cette valeur sera insérée dans le champ d’entrée lorsqu’elle sera sélectionnée.

Méthodes :

  • 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 from 'react'

import "antd/dist/antd.css";

import { Mentions } from 'antd';

 

const { Option } = Mentions;

 

export default function App() {

 

  return (

    <div style={{

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

    }}>

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

      <>

        <Mentions

          defaultValue="@Gourav"

          onChange={(data) => {console.log(data)}}

          onSelect={(option)=> {console.log(option)}}

        >

          <Option value="Gourav">Gourav</Option>

          <Option value="Ashutosh">Ashutosh</Option>

          <Option value="Kartik">Kartik</Option>

          <Option value="Nikhil">Nikhil</Option>

        </Mentions>

      </>

    </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 :

ReactApp

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

Laisser un commentaire

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