javascript - helmet - ¿Cómo seleccionar todo el texto de entrada con Reactjs, cuando está enfocado?

react title

Question

Por ejemplo: http://codepen.io/Enclave88/pen/YqNpog?editors=1010

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

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

Answer 2

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''

Answer 3

Gracias lo aprecio. Lo hice así:

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

Answer 4

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

Debe configurar ref en la entrada y cuando está enfocado debe usar select ().

Answer 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;

Seleccionar automáticamente todo el contenido en 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 () configurará todo el contenido de una etiqueta de entrada.