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.