Reactjs 如何使用内容更改文本区域的高度？

我正在尝试根据内容高度更改文本区域的高度。我看到事件处理程序没有改变高度，因为它被引导样式覆盖了。请帮忙

class PostForm extends React.Component {
  constructor(props){
    super(props);
    this.state = {titleHeight: '30', storyHeight: 1};                                                    
    this.handleKeyUp = this.handleKeyUp.bind(this);
  }
  handleKeyUp(event){
    this.setState({titleHeight: document.getElementById('post_title').scrollHeight});
    this.setState({storyHeight: document.getElementById('post_story').scrollHeight});
  }
  render () {
        var csrfToken = $('meta[name=csrf-token]').attr('content');
        return (
          <form action='create' method='post' acceptCharset='UTF-8' className= "form-group">
            <input type='hidden' name='_method' value='patch'/>
            <input type='hidden' name='utf8' value='✓' />
            <input type='hidden' name='authenticity_token' value={csrfToken} />
            <textarea id="post_title" name="post[title]" className="form-control boldText" style={formStyle.textArea} height={this.state.titleHeight} onKeyUp={this.handleKeyUp} placeholder="Title"/>
            <textarea id="post_story" name="post[story]" className="form-control" style={formStyle.textArea} height={this.state.storyHeight} onKeyUp={this.handleKeyUp} placeholder="Start telling the story"/>
            <input name="commit" type="submit" value="Post" className="btn" style={formStyle.button}/>
          </form>
        );
  }
}

const formStyle = {
  textArea: {
    border: 5,
    boxShadow: 'none',
    margin: 5,
    overflow: 'hidden',
    resize: 'none',
    ariaHidden: 'true',
  },
  button: {
    backgroundColor: 'black',
    color: 'white',
    width: 70,
    marginLeft: 18,
    marginRight: 5,
  },
}

class PostForm扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={titlelight:'30'，故事高度：1}；
this.handleKeyUp=this.handleKeyUp.bind（this）；
}
handleKeyUp（事件）{
this.setState（{titlelight:document.getElementById（'post_title'）.scrollHeight}）；
this.setState（{storyHeight:document.getElementById（'post_story'）.scrollHeight}）；
}
渲染（）{
var csrfToken=$（'meta[name=csrf-token]'）。attr（'content'）；
返回(
);
}
}
const formStyle={
文本区域：{
边界：5，
boxShadow：“无”，
差额：5，
溢出：“隐藏”，
调整大小：“无”，
阿丽亚娜：“真的”，
},
按钮：{
背景颜色：“黑色”，
颜色：'白色'，
宽度：70，
边缘左：18，
marginRight:5，
},
}

没有属性

高度

，但有一个属性

行

，可用于此目的（例如

）

---

没有CSS样式会覆盖您在

style

属性中传递的内容，它的工作方式正好相反。但是在您的

表单样式定义中没有
高度
。
您可以使用
ref
属性执行任何操作

export default class Textarea extends Component {

  componentDidMount () {
    if (this.multilineTextarea) {
      this.multilineTextarea.style.height = 'auto';
    }
  }

  changeTextarea = () => {
    this.multilineTextarea.style.height = 'auto';
    this.multilineTextarea.style.height = this.multilineTextarea.scrollHeight + 'px';
  }

  render () {
    return (
      <textarea
        onChange={this.changeTextarea}
        ref={ref => this.multilineTextarea = ref}
      />
    );
  }
}

导出默认类Textarea扩展组件{
组件安装（）{
if（此.multilitextarea）{
this.multilitextarea.style.height='auto'；
}
}
changeTextarea=（）=>{
this.multilitextarea.style.height='auto'；
this.multilitextarea.style.height=this.multilitextarea.scrollHeight+'px'；
}
渲染（）{
返回(
this.multilitextarea=ref}
/>
);
}
}

此代码可以更改textarea高度，即使它最初有一些文本，甚至在任何更改之后：）

到

export default class dynamicTextArea extends Component {
    constructor(props){
        super(props);

        this.textAreaRef = React.createRef();
    }

    componentDidMount() {
        this.textareaChange(this.textAreaRef.current);
    }

    textareaChange(ta) {
        ta.style.height = "auto";
        ta.style.height = ta.scrollHeight + "px";
    }

    render() {
        return(
            <textarea
                ref={this.textAreaRef}
                onChange={(e) => this.textAreaChange(e.target)}
            />
        );
    }
}

ta.style.height = "auto";

ta.styel.height = "30px"; // better if equal to line-height