在輸入中自動選擇文本 - Reactjs

Question

有沒有辦法選擇文本以在渲染後立即覆蓋？選擇我的意思是 -

Answer 1

您可以嘗試使用兩種方法.focus和.select

.focus（）方法將焦點設置在指定元素上，如果能夠 關注。

.select（）方法使用文本字段選擇元素或 元素中的所有文本。

const App = React.createClass({ 
 
    getInitialState() { 
 
    return { text: 'Default text' } 
 
    }, 
 
\t 
 
    componentDidMount() { 
 
    this.refs.input.focus(); 
 
    }, 
 
    
 
    handleChange(e) { 
 
    this.setState({ text: e.target.value }) 
 
    }, 
 
    
 
    handleFocus(e) { 
 
    e.currentTarget.select(); 
 
    }, 
 
    
 
    handleClick() { 
 
    this.refs.input.focus(); 
 
    }, 
 

 
    render() {  
 
    return <div> 
 
     <input 
 
     type="text" 
 
     ref="input" 
 
     value={ this.state.text } 
 
     onChange={ this.handleChange } 
 
     onFocus={ this.handleFocus } 
 
     /> 
 
     <p>{ this.state.text }</p> 
 
     <button onClick={ this.handleClick }>Select Input Text</button> 
 
    </div>; 
 
    } 
 
}); 
 

 

 
ReactDOM.render(
 
    <App />, 
 
    document.getElementById('container') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="container"></div>