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