How to select all text in input with Reactjs, when

问题:

For example: http://codepen.io/Enclave88/pen/YqNpog?editors=1010

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

回答1:

Class component:

class Input extends React.Component {
    handleFocus = (event) => event.target.select();

    render() {
        return (
            <input type="text" value="Some something" onFocus={this.handleFocus} />
        );
    }
}

---

Functional component:

const handleFocus = (event) => event.target.select();
const Input = (props) => <input type="text" value="Some something" onFocus={handleFocus} />

---

React.createClass:

handleFocus: function(event) {
  event.target.select();
},

render: function() {
  return (
    <input type="text" value="Some something" onFocus={this.handleFocus} />
  );
},

回答2:

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

You have to set ref on the input and when focused you have to use select().

回答3:

Thanks, I appreciate it. I did it so:

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

回答4:

In my case I wanted to select the text from the beginning after the input appeared in the modal:

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

<input ref='copy'

回答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;

Auto select all content in a input for a react class. The onFocus attribute on a input tag will call a function. OnFocus function has a parameter called event generated automatically. Like show above event.target.select() will set all the content of a input tag.