CODEWITHSUNDEEP
reactjs
Ceasar
Ceasar

Reputation: 23073

How to select form element with React JS?

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.

Upvotes: 3

Views: 1234

Answers (2)

TonyY
TonyY

Reputation: 703

Don't operate DOM directly!

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

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

Upvotes: 2

enjoylife
enjoylife

Reputation: 3861

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

Upvotes: 0

Related Questions