0

¿Cómo se accede al valor de un elemento usando useRef?

Quiero algo como el target que me regresaban los eventos, en el cual podía acceder a todo, incluyendo al target.value, pero usando ref con useRef, solo puedo ingresar al classList y id, pero no al value, ¿hay alguna manera?

1

2 respuestas 2

1

podrias hacerlo de la siguiente manera:

  function App() {
      const inputRef= useRef();

  const [value, setValue] = useState("");

  const handleChange = e => {
    const { value, name } = e;
    console.log(name); // obteniendo el name attr del input desde el evento
    console.log(value); // obteniendo el valor del input desde el evento

    console.log(inputRef.current.value); // obteniendo el valor del input desde el ref
    console.log(inputRef.curren.name); // obteniendo el name attr del input desde el ref

  };

  return (
    <div className="App">
      <input 
          ref={inputRef} 
          type="text" 
          name="name" 
          value={value} 
          onChange={handleChange} />
    </div>
  );
}

el evento se sigue pasando a la funcion handler de tu input o lo que estes usando, entoces podrias usarlo tambien, pero si tienes algun caso especial por el cual no lo puedas usar, entonces esa es la manera de hacerlo como esta en el ejemplo que puse.

1
  • Pero, entonces no hay una opcion ya establecida por useRef para acceder al texto dentro de las etiquetas del componente al cual le puse el ref?
    – rafs2459
    Commented el 16 abr. 2020 a las 13:06
1

Usando React Hooks puedes crear refs usando useRef, el mismo habilita una propiedad current el cual te da acceso a los atributos del elemento al que hace referencia:

Primero definimos la referencia vacía:

const inputRef = React.useRef(null);

Luego, se la asignamos al elemento en cuestión:

<input type="text=" ref={inputRef} />

Ejemplo:

function App() {
  // Definimos una referencia vacia
  const inputRef = React.useRef(null);

  const handleClick = () => {
    // `current` apunta al elemento input en cuestion
    console.log('El value de input es: ', inputRef.current.value)
  };

    return (
      <div>
        <label>
          Nombre:
          <input type="text=" placeholder="Felix" ref={inputRef} />
        </label>
        <button onClick={handleClick}>Enviar</button>
      </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.