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.

useRef para mostrar la cantidad de caracteres dentro de un área de texto

27 Jul, 2023 Programación

Teniendo el siguiente componente:

import React from 'react';

export interface TexareaProps extends React.TextareaHTMLAttributes {
  maxLength?: number;
  id: string;
}

export const Textarea = React.forwardRef(
  (
    { id = 'my-id', maxLength = 200, ...props }: TexareaProps,
    ref: React.ForwardedRef
  ) => {
    return (
      

        
      

    );
  }
);

export default Textarea;

Devuelve un textarea donde un usuario puede escribir hasta 200 caracteres. Mi objetivo es mostrar en algún lugar el recuento actual de los caracteres escritos, así que para hacer eso, el componente debe usar el hook useRef para acceder al textarea.

En JavaScript plano se haría así:

const toCheck = document.getElementById('my-id');
console.log(toCheck.value.length); // esto mostrará el recuento actual de los caracteres escritos

Pero ¿cómo se puede hacer con useRef?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para usar el gancho useRef para acceder al textarea y obtener la cantidad actual de caracteres escritos, primero puedes crear un objeto useRef en el componente de esta manera:

    const textAreaRef = useRef<htmltextareaelement>(null);

    Luego, agrega el atributo ref al elemento textarea y establece su valor como textAreaRef:

    <textarea ref="{textAreaRef}" id="{id}" maxlength="{maxLength}" {...props}=""></textarea>

    Finalmente, puedes acceder a la propiedad value de la propiedad current del objeto textAreaRef para obtener la cantidad actual de caracteres escritos:

    console.log(textAreaRef.current?.value.length);

    (El operador de encadenamiento opcional ?. se utiliza aquí para asegurarse de que no se produzca ningún error cuando textAreaRef.current sea null o undefined.)

Comments are closed.