¿Cómo seleccionar todo el texto en la entrada con Reactjs, cuando se enfocó?

92

Por ejemplo: codepen

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

Respuestas:

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} />
      );
    },
})
dschu
fuente
1
esto funciona en función pura (sin clase), gracias por esta solución.
Jan Jarčík
11
Se puede simplificar aún más sin la necesidad de la función adicional en caso de que sea solo para un campo en la clase:<input type='text' value='Some something' onFocus={e => e.target.select()} />
TK123
4
@ TK123 Debe evitar las funciones de flecha en sus métodos de renderizado . También viola jsx-no-bind que es utilizado por eslint-config-airbnb, por ejemplo.
dschu
1
¿Cómo hago para que esto funcione para un disabledcuadro de texto? jsfiddle.net/69z2wepo/317733
Rahul Desai
3
@RahulDesai En lugar 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()}}
      />
    )
  }
});

Tienes que configurar ref en la entrada y cuando estás enfocado tienes que usar select ().

obreja catalin
fuente
5

Gracias lo aprecio. Lo hice asi:

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

En mi caso, quería seleccionar el texto desde el principio después de que apareciera la entrada en el modal:

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

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

Seleccione automáticamente todo el contenido de una entrada para una clase de reacción. El atributo onFocus en una etiqueta de entrada llamará a una función. La función OnFocus tiene un parámetro llamado evento generado automáticamente. Como se muestra arriba, event.target.select () establecerá todo el contenido de una etiqueta de entrada.

Kylo Jorgensen
fuente
0

Componente funcional de otra forma con 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
fuente