Question

我有一个Form TextArea，其默认值有时非常大。如何使表格扩展为文本大小？现在，我的表单输入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>

Answer 1

您可以使用textarea的行，列和换行属性。您可以设置行和列的固定值，然后如果文本仍大于给定的行和列组合，则将显示自动滚动条。

如果要让德克萨斯州的面积增长取决于文本，而又不想滚动条，则必须通过计算文本中的字符总数来动态设置行。

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">

自动换行TextArea默认值

1 个答案: