Örneğin: codepen

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

Functional component:

const handleFocus = (event) => event.target.select();
const Input = (props) => <input type="text" value="Some something" onFocus={handleFocus} />

ES6 class component:

class Input extends React.Component {
    handleFocus = (event) => event.target.select();

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

React.createClass:

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

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

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

Girişte ref ayarlamalısınız ve odaklandığınızda select () kullanmalısınız.

Teşekkürler bunun için minnettarım. Ben de öyle yaptım:

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

Benim durumumda, giriş modalda göründükten sonra metni baştan seçmek istedim:

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

<input ref='copy'

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;

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

UseRefHook ile Başka Bir Yönlü Fonksiyonel Bileşen:

const inputEl = useRef(null);

function handleFocus() {
  inputEl.current.select();
}

<input
  type="number"
  value={quantity}
  ref={inputEl}
  onChange={e => setQuantityHandler(e.target.value)}
  onFocus={handleFocus}
/>