Lukáš Unzeitig Lukáš Unzeitig - 3 months ago 29
React JSX Question

Autoselect text in input - Reactjs

Is there way to select text to override immediately after render?? The select i mean - enter image description here

Answer

You can try 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>