我正在尝试根据内容高度更改textarea的高度。我看到事件处理程序不会更改高度,因为它会被引导程序样式覆盖。请帮忙!
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> …Run Code Online (Sandbox Code Playgroud)