콘텐츠가있는 텍스트 영역의 높이를 변경하는 방법은 무엇입니까?

Question

콘텐츠 높이에 따라 텍스트 영역의 높이를 변경하려고합니다. 부트 스트랩 스타일에 의해 덮어 쓰여지고 있기 때문에 이벤트 처리기가 높이를 변경하지 않는 것을 볼 수 있습니다. 도와주세요! textarea HTML component

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, 
    }, 
} 

Answer 1

는 그 목적 (예를 들어, <textarea rows={Math.round(this.state.storyHeight)} ... />)에 사용할 수있는 속성 height하지만 속성 rows이 없습니다.

CSS 스타일은 사용자가 style 속성에서 전달한 것보다 우선합니다. 반대의 방식으로 작동합니다. 하지만 formStyle 정의에는 height이 없습니다.