Dev Faq
0
votes

Filtrer les options sélectionnées dans le matériau autocomplete UI Lab ne fonctionne pas avec ONCHANGE

Lorsque j'utilise SANSOCOMPOMPETE pour obtenir les dates sélectionnées, les options sélectionnées ne sont pas filtrées. Par conséquent, je suis capable de sélectionner plusieurs instances des mêmes données. Bien que lorsque je suppression de l'ONCHANGE Apprenez son donnant le résultat, mais je ne suis maintenant pas en mesure de mettre à jour l'état. 

<Autocomplete
  multiple
  name="ClassSchedule"
  onChange={(event, value) => setDays(value)}
  ChipProps={{
    style: {
      backgroundColor: "#2EC5B6",
      borderRadius: "5px",
      color: "#fff",
      fontFamily: "Source Sans Pro",
    },
  }}
  id="tags-standard"
  options={[
    { title: "sunday" },
    { title: "monday" },
    { title: "tuesday" },
    { title: "wednesday" },
    { title: "thursday" },
    { title: "friday" },
    { title: "saturday" },
  ]}
  getOptionLabel={(option) => option.title}
  renderInput={(params) => (
    <CssTextField
      {...params}
      style={{
        borderRadius: "10px",
        backgroundColor: "#F5FCFB",
        fontFamily: "Source Sans Pro",
      }}
      variant="outlined"
      id="custom-css-outlined-input"
    />
  )}
/>

2 commentaires

Vous devriez reproduire votre problème sur CoDesandbox

Codesandbox Link Ceci est le lien pour le code Sandbox de code

3 Réponses :

2
votes

Selon autocomplete code> DOC :

valeur code> - tout code> - la valeur de l'autocomplete. La valeur doit avoir une égalité de référence avec l'option pour être sélectionnée forte>. Vous pouvez personnaliser le comportement de l'égalité avec le getOptionSelected code> prop fort>. P> blockQuote>

getOptionSelected code> - Func code> - utilisé pour déterminer Déterminer si une option est sélectionnée, compte tenu de la valeur actuelle forte>. Utilise une égalité stricte par défaut. P> blockQuote>

Donc de savoir s'il faut exclure la valeur sélectionnée de la valeur de la liste, vous devez implémenter getOptionSelected code> pour vérifier l'égalité pour l'exclusion, voici .title p> 

<Autocomplete
  ...
  getOptionSelected={(option, value) => option.title === value.title}
  ...
/>

0 commentaires
1
votes

Votre Onchange doit être amélioré. Vous devez définir la matrice de valeur identique à celle donnée dans la matrice d'options. Les deux matrices doivent correspondre. Vous receviez des détails de options -> Titres . Ensuite, vous devez la définir en créant un tableau similaire sur Onchange . Comme défini options -> Titres

Essayez mon exemple de sandbox de travail ici

0 commentaires
1
votes

Pour vous donner plus de connaissances sur ce qui se passe: la raison principale de la raison pour laquelle la mise en place de votre tinchange provoque l'option à remplir à nouveau avec tous les jours, est Parce que votre composant est RÉRENDÉE Chaque fois que vous définissez l'état pendant des jours versus lorsque vous ne définissez pas l'état pendant des jours. J'ai trouvé que la vérification par défaut de la vérification par défaut d'UI UI fonctionne avec une matrice stockée dans un état par rapport aux options codées Vous avez xxx

codesandbox: https://codesandbox.io/s/so-reacct -Material-ui-autocomplete-h2unq? File = / src / app.js

1 commentaires

Merci votre réponse fonctionne bien, mais la fixation d'un nouvel état est à nouveau une surcharge. Les autres réponses ont fait un très bon travail

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO