useRef

Contactar con el profesor

Los Hooks fueron introducidos en la versión 16.8 de React para optimizar en programación funcional el uso de ciertas funcionalidades inherentes a la programación orientada a objetos cuando usábamos la clase Component.

import React, {useRef} from 'react';

const App = _ => {
  const nombreRef = useRef(null);

  const procesar = _ => {
    console.log(nombreRef.current.value);
  }
  return (
    <div className="App">
      <input type="text" ref={nombreRef}/>
      <button onClick={procesar}>Enviar</button>
    </div>
  )
}

export default App;

Ejercicios – recogida de datos

De momento, en estos ejercicios no pintaremos la solución en la página HTML, sino que la mostraremos como una traza en la consola.

1. Euros a dólares

Haremos un conversor de euros a dólares. Supondremos que un euro son dos dólares. El usuario introducirá un valor en euros y se mostrará un mensaje de alerta con el correspondiente valor en dólares.

2. Grados centígrados

Definir un componente App que recogerá los grados centígrados introducidos y mostrará los correspondientes grados Fahrenheit.

Para ello deberé multiplicar por 9/5 y sumar 32. Como todo el mundo sabe, 20 grados centígrados son 68 grados Farenheit.

3. Calcular la superficie de un rectángulo

Tendremos un formulario que recogerá el ancho y el alto de un rectángulo y calculará su superficie.

← JSX
useState →

Aviso Legal | Política de privacidad