web-dev-qa-db-fra.com

Comment sélectionner tout le texte en entrée avec Reactjs, quand il s'est concentré?

Par exemple: codepen

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

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

Vous devez définir la référence sur l'entrée et une fois focalisé, vous devez utiliser select ().

5
obreja catalin

Merci, j'apprécie. Je l'ai fait ainsi:

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

Dans mon cas, je voulais sélectionner le texte depuis le début après que l'entrée soit apparue dans le modal:

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

<input ref='copy'
1
BlocksByLukas
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;

Sélection automatique de tout le contenu d'une entrée pour une classe de réaction. L'attribut onFocus sur une balise d'entrée appelle une fonction. La fonction OnFocus a un paramètre appelé événement généré automatiquement. Comme ci-dessus, event.target.select () définira tout le contenu d'une balise input.

0
Kylo Jorgensen