Por ejemplo: codepen
var InputBox = React.createClass({
render: function() {
return (
<input className="mainInput" value='Some something'></input>
)
}
});
Por ejemplo: codepen
var InputBox = React.createClass({
render: function() {
return (
<input className="mainInput" value='Some something'></input>
)
}
});
Respuestas:
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} />
);
},
})
<input type='text' value='Some something' onFocus={e => e.target.select()} />
disabled
cuadro de texto? jsfiddle.net/69z2wepo/317733
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 ().
Gracias lo aprecio. Lo hice asi:
var input = self.refs.value.getDOMNode();
input.focus();
input.setSelectionRange(0, input.value.length);
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'
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.
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}
/>