Odaklandığında, Reactjs ile girişteki tüm metinler nasıl seçilir? Örneğin

Question

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

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

Answer 1

bu temiz yaklaşımı deneyin:

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

Sen girişi ref ayarlamak zorunda ve odaklanmış zaman) (belirli kullanmak zorunda.

Answer 3

Teşekkürler, bunu takdir ediyorum. Öyle yaptım:

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; 

Otomatik bir tepki sınıfı için bir girdi tüm içeriği seçin. Bir giriş etiketindeki onFocus özniteliği bir işlevi çağırır. OnFocus işlevi, otomatik olarak oluşturulan olay olarak adlandırılan bir parametreye sahiptir. Yukarıda gösterildiği gibi event.target.select() bir giriş etiketinin tüm içeriğini ayarlayacaktır.

bu saf işlevinde çalışır

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

<input ref='copy' 

Answer 5

Benim durumumda ben baştan metni seçmek istedik.