ref實現輸入框聚焦
阿新 • • 發佈:2018-11-24
關於ref我們是怎麼理解的呢?
我們可以通過React.createRef()建立一個 ref節點,並將其打印出來。
程式碼如下:
import React,{Component} from 'react' import './MyRef.less' class MyRef extends Component{ constructor(props){ super(props) this.myRef=React.createRef() console.log('this.myRef>>>',this.myRef) } render(){ return( <div ref={this.myRef}> </div> ) } } export default MyRef
檢視控制檯我們可以看到,我們的ref取到的其實就是一個html的dom節點,或者說react元素
如果我們想實現點選按鈕,輸入框聚焦和頁面載入進來輸入框聚焦又應該怎麼做呢?
(一)當我點選按鈕,想要input框聚焦,這個時候的話,就是我們點選的時候要取到這個輸入框節點,並且讓它聚焦
程式碼如下
import React,{Component} from 'react' import './MyRef.less' class MyRef extends Component{ constructor(props){ super(props) this.textInput=React.createRef() } focusTextInput=()=>{ this.textInput.current.focus() } render(){ return( <div> <input type="text" ref={this.textInput} /> <input type="button" value="focus the text input" onClick={this.focusTextInput} /> </div> ) } } export default MyRef
(二)那如果我們想要輸入框在頁面載入就聚焦,我們應該怎麼做呢?
React 會在元件載入時將 DOM 元素傳入 current 屬性,在解除安裝時則會改回 null。
ref 的更新會發生在componentDidMount 或 componentDidUpdate 生命週期鉤子之前。
那這個時候就需要用到componentDidMount
textarea中的內容
<textarea rows={4} placeholder="請輸入您的評論" value={this.state.content} onChange={this.handleContentChange} className="ant-input" ref={(textarea)=>this.textarea=textarea} />
通過ref直接取到這個textarea的dom物件,然後再進行聚焦
componentDidMount(){
this.textarea.focus()
}
by我還差遠了,差的很遠