Wie wähle ich den gesamten Text aus, der mit Reactjs eingegeben wurde, wenn er fokussiert war?

90

Zum Beispiel: Codepen

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

Antworten:

179

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} />
      );
    },
})
dschu
quelle
1
Dies funktioniert in reiner Funktion (keine Klasse), danke für diese Lösung.
Jan Jarčík
11
Kann ohne die Notwendigkeit der zusätzlichen Funktion weiter vereinfacht werden, falls es nur für ein Feld in der Klasse ist:<input type='text' value='Some something' onFocus={e => e.target.select()} />
TK123
3
@ TK123 Sie sollten Pfeilfunktionen in Ihren Rendermethoden vermeiden . Es verletzt auch jsx-no-bind das beispielsweise von eslint-config-airbnb verwendet wird .
Dschu
1
Wie bringe ich das zum Laufen? disabled Textfeld Laufen? jsfiddle.net/69z2wepo/317733
Rahul Desai
3
@RahulDesai Anstatt disabled, VerwendungreadOnly : jsfiddle.net/kxgsv678
Dschu
5
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()}}
      />
    )
  }
});

Sie müssen ref auf den Eingang setzen und wenn Sie fokussiert sind, müssen Sie select () verwenden.

Obreja Catalin
quelle
5

Danke ich schätze das. Ich habe es so gemacht:

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

In meinem Fall wollte ich den Text von Anfang an auswählen, nachdem die Eingabe im Modal angezeigt wurde:

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

<input ref='copy'
Lukas Lukac
quelle
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;

Wählen Sie automatisch alle Inhalte in einer Eingabe für eine Reaktionsklasse aus. Das onFocus-Attribut eines Eingabe-Tags ruft eine Funktion auf. Bei der OnFocus-Funktion wird ein Parameter namens event automatisch generiert. Wie oben gezeigt, setzt event.target.select () den gesamten Inhalt eines Eingabe-Tags.

Kylo Jorgensen
quelle
Während dieses Code-Snippet die Frage möglicherweise beantwortet, bietet es keinen Kontext, um zu erklären, wie oder warum. Fügen Sie ein oder zwei Sätze hinzu, um Ihre Antwort zu erklären.
Brandonscript
0

Eine andere Möglichkeit Funktionskomponente mit 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}
/>
Igor Pavlenko
quelle