Ejemplo useref

import React, { useRef } from "react";

function App() {
  // Crear una referencia con useRef
  const inputRef = useRef(null);
    
  // Función para obtener el valor actual del input
  const handleGetValue = () => {
    alert(`Valor actual del input: ${inputRef.current.value}`);
  };

  // Función para cambiar el valor del input
  const handleChangeValue = () => {
    inputRef.current.value = "Nuevo valor dinámico";
    alert("El valor del input ha sido cambiado");
  };

  return (
    <div>
      <h1>Ejemplo de obtener y cambiar valor con useRef</h1>
      {/* Input con referencia */}
      <input ref={inputRef} type="text" placeholder="Escribe algo aquí..." />
      <br />
      {/* Botón para obtener el valor */}
      <button onClick={handleGetValue}>Obtener valor</button>
      {/* Botón para cambiar el valor */}
      <button onClick={handleChangeValue}>Cambiar valor</button>
    </div>
  );
}

export default App;

Publicado por

Juan Pablo Fuentes

Formador de programación y bases de datos