How to select form element with React JS?

Question

How can I write a React component that will automatically select a form field?

For example, in jQuery, you can automatically select a form field using select():

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>select demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
  <input type="text" name="foo" value="Some text">
<script>
  $("input").select();
</script>
</body>
</html>

How can I achieve a similar effect with React?

For some context, I am trying to write an editable form element that the user can edit by clicking it, similar to the code in this gist: https://gist.github.com/hanneshapke/4a12dd414a193d5406ea. However, this gist does not automatically select the form field when it goes into edit mode, and the user has to click again to change the text.

score 2 · Accepted Answer · answered Aug 05 '17 at 02:31

2

Don't operate DOM directly!

componentDidMount() {      
    this.refs.myFoo.select();       
} 

render() {   
    return (
        <div>              
            <input ref="myFoo" type="text" value="123"/>
        </div>             
    );                     
}

answered Aug 05 '17 at 02:31

TonyY

713
7
18

Here's the relevant documentation for the "refs" attributes, which this answer led me to. https://facebook.github.io/react/docs/refs-and-the-dom.html – Ceasar Aug 07 '17 at 23:15

score 0 · Answer 2 · answered Aug 05 '17 at 02:07

To answer your question in the context of the code snippet you linked to, I would use a combination of refs, and setSelectionRange:

handleEdit (e) {
    this.textInput.setSelectionRange(0, this.textInput.value.length)
    return (e) => this.setState({
      editing: !this.state.editing
    });
  }

render() {
   //...

   // setting the ref on render...
   <input
      type="text"
      ref={(input) => { this.textInput = input; }}
      //...
   />
}

How to select form element with React JS?

2 Answers2