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.

TonyY · Accepted Answer · 2017-08-05 02:31:11Z

2

Don't operate DOM directly!

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

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

answered Aug 5, 2017 at 2:31

TonyY

7037 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ceasar Over a year ago

Here's the relevant documentation for the "refs" attributes, which this answer led me to. facebook.github.io/react/docs/refs-and-the-dom.html

enjoylife · Accepted Answer · 2017-08-05 02:07:11Z

0

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; }}
      //...
   />
}

answered Aug 5, 2017 at 2:07

enjoylife

3,8612 gold badges27 silver badges34 bronze badges

Collectives™ on Stack Overflow

How to select form element with React JS?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related