How to select all text in input with Reactjs, when it focused?
For example: codepen
var InputBox = React.createClass({
render: function() {
return (
<input className="mainInput" value='Some something'></input>
)
}
});
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} />
);
},
})
Thanks, I appreciate it. I did it so:
var input = self.refs.value.getDOMNode();
input.focus();
input.setSelectionRange(0, input.value.length);