https://www.primefaces.org/primereact/showcase/#/datatable https://www.primefaces.org/primereact/showcase/#/multiselect

J'utilise la bibliothèque PrimeReact pour créer et personnaliser une table de données.

Ma table est dynamique et se construira d'elle-même en fonction des données qui lui sont fournies. J'attribue différents filtres à chaque colonne en fonction du type de données de la colonne, mais comme il y a un nombre variable de colonnes, je dois créer les filtres de manière dynamique.

Pour ce faire, je factorise la logique du filtre dans une classe distincte qui contient leur état et leur logique.

Mon problème est que le composant MultiSelect que j'utilise comme interface de filtre ne met pas à jour sa valeur lorsque son état est mis à jour. Après la mise à jour de l'état, la valeur reste nulle. Comme le composant MultiSelect n'a pas de référence aux valeurs précédemment sélectionnées, je ne peux choisir qu'une seule valeur à la fois.

Je pense que je manque de compréhension concernant les composants de classe, car j'utilise généralement des composants fonctionnels. J'ai utilisé un composant de classe dans ce cas afin de pouvoir accéder à filterElement à partir de la classe DropDownFilter instanciée via DropDownFilter.filterElement () et l'utiliser comme accessoire dans le composant Column.

import React from 'react'
import { MultiSelect } from 'primereact/multiselect';

class DropDownFilter extends React.Component {
  constructor(props) {
    super(props);
    this.multiSelRef = React.createRef();
    this.state = {
      selectedOptions: [],
    }

    // Added following two lines trying to fix issue but they did not alter behaviour
    this.onOptionsChange = this.onOptionsChange.bind(this)
    this.filterElement = this.filterElement.bind(this)
  }
 
  onOptionsChange = (e) => {
    this.props.dt.current.filter(e.value, this.props.field, 'in');
    this.setState({selectedOptions : e.value})
  }

  filterElement = () => {
    return (
      <React.Fragment>
        <MultiSelect
          ref={this.multiSelRef}
          value={this.state.selectedOptions}  //*** value is null even when selectedOptions has been updated after user chooses option.
                                              // Confirmed by viewing value through multiSelRef
          options={this.props.options}
          onChange={this.onOptionsChange}
          optionLabel="option"
          optionValue="option"
          className="p-column-filter"
        />
      </React.Fragment>
    )
  }

}

export default DropDownFilter;
0
CashbyCoder 19 févr. 2021 à 23:33

1 réponse

Meilleure réponse

J'ai appris que l'état ne fonctionnait pas dans ce cas, car j'instanciais DropDownFilter en utilisant le nouveau mot-clé lors de son utilisation. Cela signifie qu'il n'était pas monté sur le DOM et qu'il ne pouvait pas utiliser state.

Je rencontre toujours des problèmes concernant la mise en œuvre des colonnes personnalisées avec des filtres, mais j'ai publié une nouvelle question pour gérer cette portée avec mes nouvelles découvertes.

0
CashbyCoder 7 mars 2021 à 22:17