如何选择输入中的所有文本与 Reactjs,当它的焦点?

例如: Codepen

var InputBox = React.createClass({
render: function() {
return (
<input className="mainInput" value='Some something'></input>
)
}
});
92563 次浏览
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);

返回文章页面

const handleFocus = (event) => event.target.select();
const Input = (props) => <input type="text" value="Some something" onFocus={handleFocus} />

返回文章页面

class Input extends React.Component {
handleFocus = (event) => event.target.select();


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

返回文章页面

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


render: function() {
return (
<input type="text" value="Some something" onFocus={this.handleFocus} />
);
},
})
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 函数有一个名为自动生成的事件的参数。与上面的 show 相似,event.target.select ()将设置输入标记的所有内容。

在我的例子中,我希望从输入出现在模态之后的开始选择文本:

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


<input ref='copy'

用 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}
/>

让我们根据@dschu 的回答添加最简单的内容:

...
<input type='text' value='Some something' onFocus={e => e.target.select()} />
...