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

你可以用, div[contenteditable=true] textarea ; 因为 应该是这样的。如果你要用 您必须在每次输入时调整元素的高度,它很容易成为性能杀手。

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

内容可编辑 IE10 及以下)

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

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

实现文本区域组件 内容可编辑

<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}
      />
    )
  }
}