Come selezionare tutto il testo in input con Reactjs, quando è focalizzato?

Question

Per esempio: http://codepen.io/Enclave88/pen/YqNpog?editors=1010

var InputBox = React.createClass({ 
     render: function() { 
     return (
      <input className="mainInput" value='Some something'></input> 
     ) 
     } 
    }); 

Answer 1

Prova questo approccio pulito:

handleFocus: function(event) { 
    event.target.select(); 
}, 

render: function() { 
    return (
    <input type='text' value='Some something' onFocus={this.handleFocus} /> 
); 
}, 

Answer 2

var InputBox = React.createClass({ 
    getInitialState(){ 
    return { 
     text: '' 
    }; 
    }, 
    render: function() { 
    return (
     <input 
     ref="input" 
     className="mainInput" 
     placeholder='Text' 
     value={this.state.text} 
     onChange={(e)=>{this.setState({text:e.target.value});}} 
     onFocus={()=>{this.refs.input.select()}} 
     /> 
    ) 
    } 
}); 

è necessario impostare rif sull'ingresso e quando focalizzato bisogna usare select().

Answer 3

Grazie, lo apprezzo. L'ho fatto così:

var input = self.refs.value.getDOMNode(); 
      input.focus(); 
      input.setSelectionRange(0, input.value.length); 

Answer 4

var React = require('react'); 

var Select = React.createClass({ 
    handleFocus: function(event) { 
     event.target.select() 
    }, 
    render: function() { 
     <input type="text" onFocus={this.handleFocus} value={'all of this stuff'} /> 
    } 
}); 

module.exports = Select; 

Auto selezionare tutti i contenuti in un ingresso per una classe reagire. L'attributo onFocus su un tag di input chiamerà una funzione. La funzione OnFocus ha un parametro chiamato evento generato automaticamente. Come mostrato sopra event.target.select() imposterà tutto il contenuto di un tag di input.

Answer 5

Nel mio caso ho voluto selezionare il testo dall'inizio dopo che l'ingresso è apparso in modal:

componentDidMount: function() { 
    this.refs.copy.select(); 
}, 

<input ref='copy'