Lukáš Unzeitig Lukáš Unzeitig - 1 year ago 185
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 Source

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() {
  handleChange(e) {
    this.setState({ text: })
  handleFocus(e) {;
  handleClick() {

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

  <App />,
<script src=""></script>
<script src=""></script>
<div id="container"></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download