Как выбрать весь текст во вводе с помощью Reactjs, когда он сфокусирован?

Например: codepen

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

Ответ 1

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

Ответ 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()}}
      />
    )
  }
});

Вам нужно установить ref на вход, и при фокусировке вы должны использовать select().

Ответ 3

Спасибо, я ценю это. Я сделал это так:

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

Ответ 4

В моем случае я хотел выбрать текст с самого начала после появления ввода в модальном режиме:

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

<input ref='copy'

Ответ 5

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;

Авто выберите весь контент во входе для класса реакции. Атрибут onFocus на входном теге вызовет функцию. Функция OnFocus имеет параметр, называемый событием, генерируемым автоматически. Как показано выше, event.target.select() будет устанавливать все содержимое входного тега.