Zum Beispiel: Codestift
var InputBox = React.createClass({
render: function() {
return (
<input className="mainInput" value="Some something"></input>
)
}
});
Alexander Schtang
Zum Beispiel: Codestift
var InputBox = React.createClass({
render: function() {
return (
<input className="mainInput" value="Some something"></input>
)
}
});
dschu
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} />
);
},
})
Dies funktioniert in reiner Funktion (keine Klasse), danke für diese Lösung.
– Jan Jarčík
22. Dezember 2016 um 8:13 Uhr
@TK123 Sie sollten Pfeilfunktionen in Ihren Rendermethoden vermeiden. Es verstößt auch jsx-no-bind die verwendet wird von eslint-config-airbnb zum Beispiel.
– dschu
11. April 2018 um 15:56 Uhr
Wie bekomme ich das zum Laufen für a disabled
Textfeld? jsfiddle.net/69z2wepo/317733
– Rahul Desai
2. November 2018 um 18:05 Uhr
@RahulDesai Statt disabled
verwenden readOnly
: jsfiddle.net/kxgsv678
– dschu
5. November 2018 um 9:57 Uhr
Ist es möglich, nur einen Teil des Textes auszuwählen?
– Angelotti
29. Januar 2019 um 7:45 Uhr
Ein weiterer Weg 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}
/>
Ich verstehe nicht, warum Sie den Ref brauchen? Sie haben das Ereignisobjekt beim Auslösen des onFocus-Ereignisses.
– Christian Moen
15. November 2021 um 14:11 Uhr
Alexander Schtang
Danke ich schätze das. Ich habe es so gemacht:
var input = self.refs.value.getDOMNode();
input.focus();
input.setSelectionRange(0, input.value.length);
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 die Eingabe setzen und wenn Sie fokussiert sind, müssen Sie select () verwenden.
Lassen Sie uns das einfachste hinzufügen, basierend auf der Antwort von @ dschu:
...
<input type="text" value="Some something" onFocus={e => e.target.select()} />
...
Dies sollte die akzeptierte Antwort sein. Es ist das einfachste und schreibmaschinenfreundlich.
– LCIII
3. August um 20:20 Uhr
Lukas Lukas
In meinem Fall wollte ich den Text von Anfang an auswählen, nachdem die Eingabe im Modal erschienen ist:
componentDidMount: function() {
this.refs.copy.select();
},
<input ref="copy"
Dies sollte die akzeptierte Antwort sein. Es ist das einfachste und schreibmaschinenfreundlich.
– LCIII
3. August um 20:20 Uhr
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;
Alle Inhalte in einer Eingabe für eine Reaktionsklasse automatisch auswählen. Das onFocus-Attribut eines Eingabe-Tags ruft eine Funktion auf. Die OnFocus-Funktion hat einen automatisch generierten Parameter namens event. Wie oben gezeigt wird event.target.select() den gesamten Inhalt eines Eingabe-Tags festlegen.