react中 input组件获取焦点 如何全选文字内容?

Question

react中 input组件获取焦点 如何全选文字内容?

  render() {
    return (
      <div>

        <input className="App-input"  type="url" ref="url" value={this.state.url} onFocus={()=>console.log(0)} placeholder="输入url地址"/>
        <a className="App-input-btn" href={this.state.url} target="_blank">打开链接</a>
      </div>
    )
  }

如何实现input获取焦点时，input内容全部选中?

Answer 1

DOM 提供了一个方法：select()，用于选取文本域中的内容 所以React 可以ref取到元素DOM，然后Dom.select()

Answer 2

onFocus={()=>{
    document.getElementsByClassName('App-input')[0].select();
}}

也可以用refs来获取DOM，然后调用select方法

Answer 3

谢谢 两种方法都可以 不过还是通过refs来获取DOM更简单