Valores y visibilidad de los componentes

Cuando decimos que un componente está “controlado” o “no controlado”, nos referimos a dos aspectos independientes del componente:

• El valor del componente.
• La visibilidad del componente.

Entre los componentes disponibles, algunos tienen propiedades con initial en el nombre. Esto significa que el componente tiene un modo uncontrolled y la propiedad initial\* se puede utilizar para definir el estado inicial. Esto no significa que el componente también tenga el modo controlled disponible. A diferencia de algunos componentes heredados, las nuevas versiones no tienen propiedades con default en el nombre.

Note:

• Hay componentes heredados (en @jutro/legacy) que se comportan de manera diferente a los agregados en 10.0.
• Existen muchos componentes, como DateField, que se incluyen en la versión 10.0. Estos componentes se comportan como los heredados, pero no se han actualizado para la última versión.
• En este documento, se describen los nuevos componentes. Para obtener información sobre los componentes heredados o los componentes más antiguos que se incluyen en la versión más reciente, cambie a una versión de los documentos anterior a la 10.0.x.

Control del valor

Si desea conectar el componente al estado de la aplicación, utilice el modo controlado. También puede usar componentes no controlados si el componente se utiliza principalmente para mostrar contenido.

Para obtener más información, lea sobre el concepto de controlado frente a no controlado en React.

Las entradas pueden ser controladas y no controladas. Tienen tres propiedades:

• initialValue
• value
• onChange

Dependiendo de lo que se pase, el componente puede ser controlado o no controlado:

Cómo hacer que sea controlado

• Pase onChange y value, no pase initialValue: controlado.
  Debe mantener el estado en algún lugar de la aplicación y pasarlo al componente.

• Pasar todos: onChange, valuey initialValue: controlado.
  Igual que lo anterior. initialValue se descarta.

  Usted tiene el control total del valor del componente.

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

Cómo hacer que sea no controlado

• Pase onChange, no pase value ni initialValue: no controlado.

  El usuario puede interactuar con el componente y actualizar su estado interno. Puede reaccionar ante los cambios de valor mediante la devolución de llamada onChange. No puede controlar el estado del componente mediante programación.

• Pase onChange y initialValue, no pase value: no controlado.

  Igual que lo anterior. Se ignoran las actualizaciones de initialValue.

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

Control de la visibilidad

La visibilidad de un componente se puede controlar de varias maneras, según el componente que se utilice.

• Solo con el modo controlado: Estos componentes cambian la visibilidad en función de un desencadenador externo. Un buen ejemplo de un componente controlado es ModalNext. Obtenga más información sobre ModalNext y cómo se comporta en la sección Componentes.

• Solo con el modo no controlado: Estos componentes cambian la visibilidad en función de un desencadenador interno, por ejemplo, el componente acordeón. El estado inicial del componente puede establecerse en "inicial". Posteriormente, el estado se gestiona dentro del componente.

  En el siguiente ejemplo de acordeón, se muestra algo de contenido en las pestañas, pero al cambiar de pestaña no se cambia nada en la aplicación. Su objetivo principal es mostrar el contenido de las pestañas. En el primer renderizado, las tarjetas abiertas están determinadas por su propiedad 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>
    );
  };

• Otros componentes: Estos componentes no controlan su visibilidad. No se ven afectados por el aspecto de controlabilidad de los componentes.

  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>
  );