Wie man den gesamten Text in der Eingabe mit Reactjs auswählt, wenn er fokussiert ist?

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

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

InformationsquelleAutor der Frage Alexander Shtang | 2016-03-17

  1. 66

    Versuchen, diese saubere Ansatz:

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

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

    InformationsquelleAutor der Antwort dschu

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

    Setzen Sie ref auf den Eingang und konzentriert, wenn Sie verwenden müssen, wählen Sie().

    InformationsquelleAutor der Antwort obreja catalin

  3. 1

    Dank, ich weiß es zu schätzen. Ich habe es so: 

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

    InformationsquelleAutor der Antwort Alexander Shtang

  4. 0

    In meinem Fall wollte ich markieren Sie den text von Anfang an nach der Eingabe erschien im modal:

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

<input ref='copy'

    InformationsquelleAutor der Antwort EnchanterIO

  5. 0
    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 wählen Sie alle Inhalte in eine Eingabe für ein reagieren Klasse. Die onFocus-Attribut eines input-tag wird eine Funktion aufrufen. OnFocus Funktion hat einen parameter namens event automatisch generiert. Wie oben zeigen Ereignis.Ziel.wählen Sie() werden alle Inhalte von einem input-tag.

    InformationsquelleAutor der Antwort Kylo Jorgensen

Schreibe einen Kommentar