Na przykład: codepen
var InputBox = React.createClass({
render: function() {
return (
<input className="mainInput" value='Some something'></input>
)
}
});
javascript
select
input
reactjs
Alexander Shtang
źródło
źródło
<input type='text' value='Some something' onFocus={e => e.target.select()} />
disabled
pola tekstowego? jsfiddle.net/69z2wepo/317733disabled
użyjreadOnly
: jsfiddle.net/kxgsv678var 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()}} /> ) } });
Musisz ustawić ref na wejściu, a gdy jest aktywny, musisz użyć select ().
źródło
Dzięki doceniam to. Zrobiłem to tak:
var input = self.refs.value.getDOMNode(); input.focus(); input.setSelectionRange(0, input.value.length);
źródło
W moim przypadku chciałem zaznaczyć tekst od początku po pojawieniu się wejścia w oknie modalnym:
componentDidMount: function() { this.refs.copy.select(); }, <input ref='copy'
źródło
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;
Automatycznie zaznacz wszystkie treści w wejściu dla klasy reagowania. Atrybut onFocus w znaczniku wejściowym wywoła funkcję. Funkcja OnFocus posiada parametr zwany zdarzeniem generowany automatycznie. Jak pokazano powyżej, event.target.select () ustawi całą zawartość znacznika wejściowego.
źródło
Inaczej funkcjonalny komponent z 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} />
źródło