鍍金池/ 問(wèn)答/HTML/ react中 input組件獲取焦點(diǎn) 如何全選文字內(nèi)容?

react中 input組件獲取焦點(diǎn) 如何全選文字內(nèi)容?

react中 input組件獲取焦點(diǎn) 如何全選文字內(nèi)容?

  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">打開(kāi)鏈接</a>
      </div>
    )
  }

如何實(shí)現(xiàn)input獲取焦點(diǎn)時(shí)，input內(nèi)容全部選中?

回答
編輯回答
若相惜

DOM 提供了一個(gè)方法：select()，用于選取文本域中的內(nèi)容 所以React 可以ref取到元素DOM，然后Dom.select()

2018年4月21日 18:15
編輯回答
不舍棄

謝謝 兩種方法都可以 不過(guò)還是通過(guò)refs來(lái)獲取DOM更簡(jiǎn)單

2017年2月23日 07:21
編輯回答
情已空
onFocus={()=>{
    document.getElementsByClassName('App-input')[0].select();
}}

也可以用refs來(lái)獲取DOM，然后調(diào)用select方法

2017年8月23日 14:30