0
Je suis en train de changer la hauteur du textarea selon la hauteur du contenu. Je vois que le gestionnaire d'événements ne change pas la hauteur car il est écrasé par le style d'amorçage. S'il vous plaît aider!Comment changer la hauteur de textarea avec le contenu?
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,
},
}