自动选择输入中的文本 - Reactjs

Question

有没有办法在渲染后立即选择要覆盖的文本？我的意思是选择 -

Answer 1

您可以尝试使用两种方法.focus和.select

.focus()方法将焦点设置在指定的元素上，如果它可以被聚焦。

.select()方法选择元素中的所有文本或带有文本字段的元素。

const App = React.createClass({
  getInitialState() {
    return { text: 'Default text' }
  },
	
  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>