Javascript 聚焦时如何使用Reactjs选择输入中的所有文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36051883/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to select all text in input with Reactjs, when it focused?
提问by Alexander Shtang
回答by dschu
Functional component:
Functional component：
const handleFocus = (event) => event.target.select();
const Input = (props) => <input type="text" value="Some something" onFocus={handleFocus} />
ES6 class component:
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：
React.createClass({
handleFocus: function(event) {
event.target.select();
},
render: function() {
return (
<input type="text" value="Some something" onFocus={this.handleFocus} />
);
},
})
回答by obreja catalin
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()}}
/>
)
}
});
You have to set ref on the input and when focused you have to use select().
您必须在输入上设置 ref，并且在聚焦时必须使用 select()。
回答by Alexander Shtang
Thanks, I appreciate it. I did it so:
谢谢，我很感激。我是这样做的：
var input = self.refs.value.getDOMNode();
input.focus();
input.setSelectionRange(0, input.value.length);
回答by Lukas Lukac
In my case I wanted to select the text from the beginning after the input appeared in the modal:
在我的情况下，我想在输入出现在模式中后从头开始选择文本：
componentDidMount: function() {
this.refs.copy.select();
},
<input ref='copy'
回答by Igor Pavlenko
Another Way Functional Component with useRefHook:
使用 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}
/>
回答by Kylo Jorgensen
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;
Auto select all content in a input for a react class. The onFocus attribute on a input tag will call a function. OnFocus function has a parameter called event generated automatically. Like show above event.target.select() will set all the content of a input tag.
自动选择反应类的输入中的所有内容。输入标签上的 onFocus 属性将调用一个函数。OnFocus 函数有一个参数叫做自动生成的事件。如上所示， event.target.select() 将设置输入标签的所有内容。
