es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo cambiar el estilo de un gancho?

31 May, 2023 Programación

Tengo un enunciado if que establece un gancho, pero además de modificar el texto interior, ¿quiero variar el estilo, es posible? aquí está el código:

const [ageLabel, setAgeLabel] = useState('Age');

const testDate = () => {
    let day = parseInt(dayText);
    let month = parseInt(monthText);
    let year = parseInt(yearText);
    setAgeLabel('Age');
    let label = 'Age - Please Enter a Valid Year';
    if (dayText === '' || monthText === '' || yearText === '') {
      setAgeLabel('Age - Please Enter a Valid Date');
    } else if (day < 1 || day > 31) {
      setAgeLabel('Age - Please Enter a Valid Day');
    } else if (month < 1 || month > 12) {
      setAgeLabel('Age - Please Enter a valid Month');
    } else if (year < 1900 || year > 2020) {
      setAgeLabel('Age - Please Enter a Valid Year');
    } else {
      saveUserCardData();
    }
  };

y cuando se llama a SaveUserCardData, guarda los datos, pero me gustaría cambiar la fuente y el color de ageLabel, ¿cómo puedo hacerlo?

¡Gracias!

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, es posible variar el estilo de ageLabel. Puede crear un hook de estado separado para el estilo y actualizarlo según las condiciones en la declaración if. Aquí hay un ejemplo:

    const [ageLabel, setAgeLabel] = useState('Edad');
const [ageLabelStyle, setAgeLabelStyle] = useState({ color: 'black', fontSize: 16 });

const testDate = () => {
  let day = parseInt(dayText);
  let month = parseInt(monthText);
  let year = parseInt(yearText);
  setAgeLabel('Edad');
  let label = 'Edad - Por favor, ingrese un año válido';
  if (dayText === '' || monthText === '' || yearText === '') {
    setAgeLabel('Edad - Por favor, ingrese una fecha válida');
    setAgeLabelStyle({ color: 'red', fontSize: 18 });
  } else if (day < 1 || day > 31) {
    setAgeLabel('Edad - Por favor, ingrese un día válido');
    setAgeLabelStyle({ color: 'red', fontSize: 18 });
  } else if (month < 1 || month > 12) {
    setAgeLabel('Edad - Por favor, ingrese un mes válido');
    setAgeLabelStyle({ color: 'red', fontSize: 18 });
  } else if (year < 1900 || year > 2020) {
    setAgeLabel('Edad - Por favor, ingrese un año válido');
    setAgeLabelStyle({ color: 'red', fontSize: 18 });
  } else {
    saveUserCardData();
    setAgeLabelStyle({ color: 'green', fontSize: 16 });
  }
};

// En su JSX:
<text style="{ageLabelStyle}">{ageLabel}</text>

    En este ejemplo, creamos un nuevo hook de estado llamado ageLabelStyle, que almacena un objeto con el color de fuente y el tamaño de fuente para ageLabel. En cada condición en la declaración if, actualizamos ageLabelStyle según el mensaje de error. Si no hay errores y se llama a saveUserCardData(), actualizamos el estilo para indicar éxito.

    En el JSX, pasamos el objeto ageLabelStyle como una propiedad al componente Text, que aplica los estilos al texto de la etiqueta.

Comments are closed.