Lo que estoy tratando de lograr es un área de texto que cambia de tamaño automáticamente cuando el usuario continúa escribiendo o pega un texto largo en el área de texto.
Esto es lo que tengo.
class TextArea extends InputBase { render() { const { label, placeholder, wrap, rows, cols, disabled, style, textStyle, textClass, value } = this.props; return ( <div className={formClass} style={style}> {!!label && (<label className="control-label" htmlFor={this.id}>{label}</label>)} <textarea id={this.id} className={`form-control ${textClass}`} placeholder={placeholder} disabled={disabled} style={textStyle} rows={rows} cols={cols} wrap={wrap} value={this.state.value || ''} onChange={this.onChange} onBlur={this.onBlur} onFocus={this.onFocus} onKeyPress={this.onKeyPresses} onKeyUp={this.onKeyUp}>{value}</textarea> </div> ); } }Cualquier sugerencia sobre cómo podría cambiar el tamaño del área de texto para que se expanda de acuerdo con la longitud del contenido en el área de texto.
Puede resolver esto principalmente con CSS utilizando un enfoque que se describe en css-tricks.com .
La solución es poner su área de textarea dentro de un div, hacer que su div coincida con el estilo del área de textarea , luego use display:grid para hacer que el área de textarea se expanda para llenar su contenedor principal a medida que crece:
.grow-wrap { /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */ display: grid; } .grow-wrap::after { /* Note the weird space! Needed to preventy jumpy behavior */ content: attr(data-replicated-value) " "; /* This is how textarea text behaves */ white-space: pre-wrap; /* Hidden from view, clicks, and screen readers */ visibility: hidden; } .grow-wrap>textarea { /* You could leave this, but after a user resizes, then it ruins the auto sizing */ resize: none; /* Firefox shows scrollbar on growth, you can hide like this. */ overflow: hidden; } .grow-wrap>textarea, .grow-wrap::after { /* Identical styling required!! */ border: 1px solid black; padding: 0.5rem; font: inherit; /* Place on top of each other */ grid-area: 1 / 1 / 2 / 2; } <div class="grow-wrap"> <textarea name="text" id="text" onInput="this.parentNode.dataset.replicatedValue = this.value"></textarea> </div>