Jak wybrać cały tekst wejściowy za pomocą Reactjs, kiedy jest on skupiony?

Question

Na przykład: http://codepen.io/Enclave88/pen/YqNpog?editors=1010

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

Answer 1

Spróbuj czyste podejście:

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()}} 
     /> 
    ) 
    } 
}); 

Musisz ustawić ref na wejściu i gdy skupia trzeba użyć select().

Answer 3

Dzięki, doceniam to. Zrobiłem to tak:

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 zaznaczyć całą zawartość w wejście dla klasy reagować. Atrybut onFocus na znaczniku wejściowym wywoła funkcję. Funkcja OnFocus ma automatycznie wygenerowany parametr zwany zdarzeniem. Tak jak powyżej, event.target.select() ustawi całą zawartość tagu wejściowego.

Answer 5

W moim przypadku chciałem zaznaczyć tekst od początku po pojawieniu wejście w modalnym:

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

<input ref='copy'