useRef para mostrar la cantidad de caracteres dentro de un área de texto
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?
davy.ai
Para usar el gancho
useRef
para acceder al textarea y obtener la cantidad actual de caracteres escritos, primero puedes crear un objetouseRef
en el componente de esta manera:Luego, agrega el atributo
ref
al elemento textarea y establece su valor comotextAreaRef
:Finalmente, puedes acceder a la propiedad
value
de la propiedadcurrent
del objetotextAreaRef
para obtener la cantidad actual de caracteres escritos:(El operador de encadenamiento opcional
?.
se utiliza aquí para asegurarse de que no se produzca ningún error cuandotextAreaRef.current
seanull
oundefined
.)