Tengo un componente como este:
const Panel = () => { const input = useRef<HTMLTextAreaElement>(null); return ( <Wrapper> <Input ref={input} /> <Button onClick={() => { input.current?.scrollHeight = ""; }} > </Button> </Wrapper> ); }; Necesito cambiar la altura de scrollHeight de la entrada al hacer clic en el botón, así que intenté usar useRef , pero aparece un error: Cannot assign to 'scrollHeight' because it is a read-only property . ¿Cómo puedo arreglarlo?
No tengo mucho de lo que partir, por lo que has escrito, pero algo como esto podría ayudar:
const Panel = () => { const input = useRef<HTMLTextAreaElement>(null); // collect the current style height that is used to establish the scroll height const height = document.getElementyById()?.clientHeight return ( <Wrapper> <Input ref={input} /> <Button onClick={() => { function (){ document.getElementById()?.style.height = `${height}px`; }} > // add to the height this way, start with the clientheight and add to it </Button> </Wrapper> ); };Según los documentos
La propiedad de solo lectura Element.scrollHeight es una medida de la altura del contenido de un elemento, incluido el contenido no visible en la pantalla debido al desbordamiento. https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
Dependiendo de lo que desee lograr, es posible que desee utilizar window.pageYOffset || document.documentElement.scrollTop para medir la distancia del elemento desde la parte superior, o manipular una de las propiedades getBoundingClientRect().
O tal vez si solo desea reducir las dimensiones de los elementos, puede establecer una altura fija y configurar el desbordamiento para desplazarse.