web-dev-qa-db-fra.com

React Select - Méthode personnalisée de sélection multiple pour afficher plusieurs options

Je cherche à personnaliser la multisélection et la façon dont nous créons l'affichage des options sélectionnées.

À l'heure actuelle, avec de nombreuses options sélectionnées, le composant sélectionné occupe une quantité prohibitive d'espace pour certaines interfaces utilisateur. Voir l'exemple:

enter image description here

Je voudrais utiliser l'affichage de la puce prête à l'emploi pour les options sélectionnées dans l'entrée, mais je ne veux afficher que quelques options sélectionnées (comme 3/4 max), puis ajouter un nombre de "badges" pour le nombre de les options sélectionnées qui ne sont pas affichées dans le conteneur de valeurs en entrée. Les options sélectionnées mais dépassant le nombre maximal de puces autorisées à afficher dans l'entrée doivent s'afficher comme sélectionnées dans la liste déroulante, tandis que les puces qui affichent les valeurs ne doivent pas montrer dans notre liste déroulante.

J'ai implémenté une partie de cela en utilisant un ValueContainer personnalisé pour afficher uniquement les premières sélections de puces, puis en ajoutant un nombre de sélections supplémentaires/"dépassement". Je ne sais pas comment je peux utiliser le prop hideSelectedOptions pour y parvenir afin d'afficher les éléments sélectionnés dans la liste uniquement lorsque mon max est rencontré sans les montrer tous puisque cet accessoire prend un booléen.

enter image description here

Voici ce que j'ai jusqu'à présent: https://codesandbox.io/s/custom-react-select-sjtib


import React, { Component } from "react";
import Select, { components } from "react-select";
import { colourOptions } from "./docs/data";
import "./example.css";

class CustomSelect extends Component {
  state = {
    values: []
  };

  handleChange = values => {
    this.setState({ values });
  };

  render() {
    const { values } = this.state;
    return (
      <div>
        <Select
          hideSelectedOptions={values.length < 3 ? true : false}
          isMulti
          options={colourOptions}
          onChange={this.handleChange}
          value={values}
          components={{ ValueContainer }}
        />
      </div>
    );
  }
}

export default CustomSelect;

const ValueContainer = ({ children, getValue, ...props }) => {
  let maxToShow = 3;
  var length = getValue().length;
  let displayChips = React.Children.toArray(children).slice(0, maxToShow);
  let shouldBadgeShow = length > maxToShow;
  let displayLength = length - maxToShow;

  return (
    <components.ValueContainer {...props}>
      {!props.selectProps.inputValue && displayChips}
      <div className="root">
        {shouldBadgeShow &&
          `+ ${displayLength} item${length != 1 ? "s" : ""} selected`}
      </div>
    </components.ValueContainer>
  );
};
reactjsselectdropdownreact-select
4
user10782250

Je garderais personnellement hideSelectedOptions={false} Et j'irais pour l'utilisation de la propriété styles (la propriété options pour être plus précis) et la définition de display: 'none' Pour celles qui ne devraient pas être visible:

const styles = {
    option: (base, value) => {
        return (shouldBeShown(value) ? { ...base } : { display: 'none'});
    }
};

shouldBeShown(value) est une fonction personnalisée pour vérifier si l'option particulière doit être affichée. Afin d'obtenir des données sur les options, vous pouvez utiliser value.data.

Ensuite, vous pouvez définir styles={styles} Dans le composant Select:

<Select
    hideSelectedOptions={false}
    isMulti
    styles={styles}
    onChange={this.handleChange}
    options={options}
    value={values}
    components={{ ValueContainer }}
/>
1
cohnred

Pour une raison quelconque, ne fonctionne pas du tout. Veuillez conseiller.

Le nom de la méthode que j'ai est Conteneur de limite de valeur.

Code Sandbox Link

0
a2441918