Valeurs et visibilité des composants

Lorsque nous disons qu'un composant est « contrôlé » ou « non contrôlé », nous faisons référence à deux aspects indépendants du composant :

• La valeur du composant.
• La visibilité du composant.

Parmi les composants disponibles, certains ont des propriétés dont le nom contient initial. Cela signifie que le composant a un mode uncontrolled et que la propriété initial\* peut être utilisée pour définir l'état initial. Cela ne signifie pas que le composant a également un mode controlled disponible. Contrairement à certains composants hérités, les nouvelles versions n'ont pas de propriétés dont le nom contient default.

Note:

• Il existe des composants hérités (dans @jutro/legacy) qui se comportent différemment de ceux ajoutés dans la version 10.0.
• De nombreux composants, tels que DateField, sont inclus dans la version 10.0. Ces composants se comportent comme des composants hérités, mais ils n'ont pas été mis à jour pour la dernière version.
• Ce document décrit les nouveaux composants. Pour en savoir plus sur les composants hérités ou les composants plus anciens inclus dans la dernière version, passez à une version des documents antérieure à une version 10.0.x.

Contrôle de la valeur

Si vous souhaitez connecter le composant à l'état de l'application, utilisez le mode contrôlé. Vous pouvez également utiliser des composants non contrôlés si vous utilisez le composant pour afficher principalement du contenu.

Pour en savoir plus, découvrez le concept de composant contrôlé vs composant non contrôlé dans React.

Les entrées peuvent être contrôlées et non contrôlées. Elles ont trois propriétés :

• initialValue
• value
• onChange

Selon ce qui est transmis, le composant est contrôlé ou non contrôlé :

Rendre un composant contrôlé

• Transmettre onChange et value, ne pas transmettre initialValue : contrôlé.
  Vous devez conserver le statut quelque part dans l'application et le transmettre au composant.

• Transmettre tout : onChange, value et initialValue : contrôlé.
  Identique à ci-dessus. initialValue est ignoré.

  Vous avez le contrôle total de la valeur du composant.

  const [value, setValue] = useState('initial value');
  
  <TextInput
    label="Controlled input"
    value={value}
    onChange={(e) => {
      setValue(e.target.value.toLocaleUpperCase());
    }}
  />;

Rendre un composant non contrôlé

• Transmettre onChange, ne pas transmettre value et initialValue : non contrôlé.

  L'utilisateur peut interagir avec le composant et mettre à jour son état interne. Vous pouvez réagir aux modifications de valeur en utilisant un rappel onChange. Vous ne pouvez pas contrôler l'état du composant par programmation.

• Transmettre onChange et initialValue, ne pas transmettre value : non contrôlé.

  Voir ci-dessus. Les mises à jour vers initialValue sont ignorées.

  <TextInput
    label="Uncontrolled input"
    // initialValue="Initial value"
    onChange={(e) => {
      console.log(e.target.value);
    }}
  />

Contrôle de la visibilité

La visibilité d'un composant peut être contrôlée de plusieurs façons, selon le composant utilisé.

• Uniquement en mode contrôlé : ces composants modifient la visibilité en fonction d'un déclencheur externe. ModalNext est un bon exemple de composant contrôlé. Découvrez ModalNext et son comportement dans la section Composants.

• Uniquement en mode non contrôlé : ces composants modifient la visibilité en fonction d'un déclencheur interne, par exemple le composant Accordéon. L'état initial du composant peut être défini sur « initial ». Par la suite, l'état est géré au sein du composant.

  L'exemple Accordéon suivant affiche du contenu dans des onglets, mais la modification des onglets ne change rien dans l'application. Son objectif principal est d'afficher le contenu des onglets. Lors du premier affichage, les fiches ouvertes sont déterminées par leur propriété initialExpanded.

  const UncontrolledAccordion = () => {
    return (
      <Accordion>
        <AccordionCard
          title="Card 1"
          initialExpanded={false}>
          Test card 1
        </AccordionCard>
        <AccordionCard
          title="Card 2"
          initialExpanded>
          Test card 2
        </AccordionCard>
      </Accordion>
    );
  };

• Autres composants : ces composants ne contrôlent pas leur visibilité. Ils ne sont pas affectés par l'aspect contrôlable des composants.

  const [showSomeButton, setShowSomeButton] = useState(true);
  return (
    <React.Fragment>
      <Button
        label="I can hide the other button"
        onClick={() => setShowSomeButton((show) => !show)}
      />
      {showSomeButton && <Button label="I can be hidden" />}
    </React.Fragment>
  );