根据分配给值的内容大小调整文本区域高度

Question

我的react应用程序中有一个文本区域。我在文本区域中显示了一些文本，但问题是当文本较长时，textarea不会扩展以显示全文，而是会向下滚动。如何根据我设置为textarea

的内容大小来扩展文本区域

我的代码如下

<div className="width_100">

        <textarea className="home_post_text margin_bottom10px" value={this.urlify(postData.heading)}></textarea>

 </div>

这是它在我的react应用程序中显示的方式。我必须向下滚动才能看到全文。如何扩展文本区域，使其显示全文。

Answer 1

您可以使用div[contenteditable=true]代替textarea；因为textarea应该表现得那样。如果要使用textarea，则必须在每次输入时调整元素的高度，它很容易成为性能杀手。

另一方面，在contenteditable上使用div，允许您利用默认行为，即增加元素的高度以适合其内容。

  

请记住，contenteditable在某些旧版浏览器（例如IE10及以下版本）上无法正常运行

检查波纹管的工作状态。

div[contenteditable="true"] {
  border: 1px solid grey;
  padding: 5px 10px;
}

<div contenteditable="true">
  test
</div>

更新

使用contenteditable

来实现文本区域组件

<TextArea
    value={myText}
    style={{ 'border': '1px solid grey' }}
    onChange={e => console.log(e.target.value)} />

实施

class TextArea extends React.Component {    
  onChange() {
    var text = ReactDOM.findDOMNode(this).innerText;
    this.props.onChange && this.props.onChange({
      target: {
        value: text
      }
    });
  }

  render() {    
    const {props} = this;

    return (
      <div
        contentEditable={true}
        dangerouslySetInnerHTML={{ __html: props.value.replace(/\r?\n/g, '<br>') }}
        onInput={this.onChange.bind(this)}
        onBlur={this.onChange.bind(this)}
        {...props}
      />
    )
  }
}