Reactjsで入力中のすべてのテキストを、どのように選択するか？たとえば

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

は、このきれいなアプローチを試してみてください。入力タグのonFocus属性は関数を呼び出します。 OnFocus関数には、自動的に生成されるeventというパラメータがあります。上記のshowと同様に、event.target.select（）は入力タグのすべての内容を設定します。入力がモーダルに登場した後、私は最初からテキストを選択したかった私の場合は

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

あなたが入力に参照を設定する必要がと焦点を当てたときに（選択使用する必要があります）。

Answer 3

ありがとう、私はそれを感謝します。私はそれをやった：自動反応するクラスの入力内のすべてのコンテンツを選択し

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

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

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; 

：

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

Answer 5

：

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

<input ref='copy'