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

Ответы:

188

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} />
      );
    },
})
дщу
источник
1
это работает в чистой функции (без класса), спасибо за это решение.
Ян Ярчик
11
Можно упростить дальше без необходимости в дополнительной функции, если это только для одного поля в классе:<input type='text' value='Some something' onFocus={e => e.target.select()} />
TK123
4
@ TK123 Вам следует избегать стрелочных функций в ваших методах рендеринга . Он также нарушает jsx-no-bind, который используется, например, eslint-config-airbnb .
dschu
1
Как мне заставить это работать для disabledтекстового поля? jsfiddle.net/69z2wepo/317733
Рахул Десаи,
3
@RahulDesai Вместо этого disabledиспользуйте readOnly: jsfiddle.net/kxgsv678
dschu 05
5
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 ().

Обрея Каталин
источник
5

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

var input = self.refs.value.getDOMNode();
            input.focus();
            input.setSelectionRange(0, input.value.length);
Александр Штанг
источник
1

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

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

<input ref='copy'
Лукас Лукач
источник
0
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 () установит все содержимое входного тега.

Кайло Йоргенсен
источник
0

Функциональный компонент другого пути с useRefHook:

const inputEl = useRef(null);

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

<input
  type="number"
  value={quantity}
  ref={inputEl}
  onChange={e => setQuantityHandler(e.target.value)}
  onFocus={handleFocus}
/>
Игорь Павленко
источник