Например: codepen
var InputBox = React.createClass({
render: function() {
return (
<input className="mainInput" value='Some something'></input>
)
}
});
Например: codepen
var InputBox = React.createClass({
render: function() {
return (
<input className="mainInput" value='Some something'></input>
)
}
});
Ответы:
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} />
);
},
})
<input type='text' value='Some something' onFocus={e => e.target.select()} />
disabled
текстового поля? jsfiddle.net/69z2wepo/317733
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()}}
/>
)
}
});
Вы должны установить ref для ввода, и когда вы сфокусированы, вы должны использовать select ().
Спасибо, я ценю это. Я сделал так:
var input = self.refs.value.getDOMNode();
input.focus();
input.setSelectionRange(0, input.value.length);
В моем случае я хотел выделить текст с самого начала после того, как ввод появился в модальном окне:
componentDidMount: function() {
this.refs.copy.select();
},
<input ref='copy'
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;
Автоматический выбор всего содержимого во входных данных для класса реакции. Атрибут onFocus во входном теге вызовет функцию. Функция OnFocus имеет параметр, называемый событием, генерируемым автоматически. Как показано выше, event.target.select () установит все содержимое входного тега.
Функциональный компонент другого пути с 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}
/>