Блог

У меня есть текстовая область формы со значением по умолчанию, которое, к сожалению, иногда бывает довольно большим. Как я могу сделать так, чтобы форма была расширена до размера текста? Прямо сейчас моя форма ввода ADI усечена, поэтому я не могу видеть весь текст.

             <div style={{width: '50rem', margin: '1rem', overflow: 'auto'}}>
                <Header as='h2' textAlign='center' style={styles.mainHeader}>CMS View</Header>

                <Segment raised className='magentaSegment'>

                    <Form style={{paddingBottom: '2.5em'}} error={this.props.networksHasErrored}>
                        <Form.Group widths='equal'>
                        </Form.Group>
                        <Form.TextArea fluid label='ADI' value = {cmsObj.ADI}  style={styles.normalColor} />

                    </Form>
                </Segment>
            </div>
  

Вы можете использовать строки, столбцы и свойства переноса текстовой области. Вы можете установить фиксированные значения для строк и столбцов, а затем, если текст по-прежнему больше, чем заданная комбинация строк и столбцов, появится автоматическая полоса прокрутки.

Если вы хотите, чтобы ваша texarea увеличивалась в зависимости от текста, и не хотите полосу прокрутки, тогда вам нужно динамически задавать строки, вычисляя общее количество символов в тексте.

 function calculateRows(text){
  if(!text)
  return 1;

  return  Math.ceil(text.length/10);
}
const rows = calculateRows(text)
<textarea id="story" name="story" rows={rows} cols="10">