Como selecionar todo o texto de entrada com Reactjs, quando está focado?

92

Por exemplo: codepen

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

Respostas:

187

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} />
      );
    },
})
dschu
fonte
1
isso funciona em função pura (sem classe), obrigado por esta solução.
Jan Jarčík
11
Pode ser mais simplificado sem a necessidade da função extra no caso de ser apenas para um campo da classe:<input type='text' value='Some something' onFocus={e => e.target.select()} />
TK123
4
@ TK123 Você deve evitar funções de seta em seus métodos de renderização . Ele também viola jsx-no-bind que é usado por eslint-config-airbnb por exemplo.
dschu
1
Como faço para que isso funcione para uma disabledcaixa de texto? jsfiddle.net/69z2wepo/317733
Rahul Desai
3
@RahulDesai Em vez de disabled, use readOnly: jsfiddle.net/kxgsv678
dschu
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()}}
      />
    )
  }
});

Você deve definir ref na entrada e quando estiver focado, você deve usar select ().

Obreja Catalin
fonte
5

Obrigado, Eu agradeço. Eu fiz assim:

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

No meu caso, eu queria selecionar o texto desde o início depois que a entrada apareceu no modal:

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

<input ref='copy'
Lukas Lukac
fonte
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;

Selecione automaticamente todo o conteúdo em uma entrada para uma classe de reação. O atributo onFocus em uma tag de entrada chamará uma função. A função OnFocus possui um parâmetro denominado evento gerado automaticamente. Como mostrado acima, event.target.select () definirá todo o conteúdo de uma tag de entrada.

Kylo Jorgensen
fonte
0

Componente funcional de outra maneira com 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}
/>
Igor Pavlenko
fonte