Autoselect text in input - Reactjs

Question

Is there way to select text to override immediately after render?? The select i mean -

Answer 1

You can try to use two methods .focus and .select

.focus() method sets focus on the specified element, if it can be focused.

.select() method selects all the text in a element or an element with a text field.

const App = React.createClass({
  getInitialState() {
    return { text: 'Default text' }
  },
	
  componentDidMount() {
    this.refs.input.focus();
  },
  
  handleChange(e) {
    this.setState({ text: e.target.value })
  },
   
  handleFocus(e) {
    e.currentTarget.select();
  }, 
  
  handleClick() {
    this.refs.input.focus();
  },

  render() {    
    return <div>
      <input 
        type="text" 
        ref="input"
        value={ this.state.text } 
        onChange={ this.handleChange }
        onFocus={ this.handleFocus }
      />
      <p>{ this.state.text }</p> 
      <button onClick={ this.handleClick }>Select Input Text</button>
    </div>;
  }
});


ReactDOM.render(
  <App />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>