Skip to content

Instantly share code, notes, and snippets.

@alexanderchan
Created January 27, 2016 04:58
Show Gist options
  • Save alexanderchan/5a6340088135f709d27b to your computer and use it in GitHub Desktop.
Save alexanderchan/5a6340088135f709d27b to your computer and use it in GitHub Desktop.
/*jshint esnext:true */
class TestAutosize extends React.Component {
constructor(props){
super(props);
this.state = {
searchText: 'some example text'
}
this.autosize = this.autosize.bind(this);
this.handleChange = this.handleChange.bind(this);
}
autosize() {
console.log(this._input.scrollWidth)
this._input.style.width = '0px';
this._input.style.width = `${this._input.scrollWidth+2}px`;
}
handleChange(e){
this.setState({
searchText: e.target.value,
})
this.autosize()
}
componentDidMount(){
this.autosize();
}
render() {
return (
<div>
<input onChange={this.handleChange}
value={this.state.searchText}
ref={ c => this._input = c}
/>
</div>
)
}
}
ReactDOM.render(<TestAutosize/>, document.getElementById('app'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment