<h2 ref="test">這是h2標簽</h2>

this.refs.test

<Text ref="hellow"/>

this.refs.hellow

?? ? class Dom extends React.Component{
? ? showInputDom = () =>{
? ? ? const {userNameInput} = this.refs
? ? ? console.log(userNameInput);
? ? }
? ? render(){
? ? ? return (
? ? ? ? <div>
? ? ? ? ? <input ref="userNameInput" type="text"/>
? ? ? ? ? <button onClick={this.showInputDom}>點擊顯示inpuDom</button>
? ? ? ? </div>
? ? ? )
? ? }
? }
? ReactDOM.render(<Dom/>,document.getElementById('root'))

?? ?class Dom extends React.Component{
? ? showInputDom = () =>{
? ? ? const {userNameInput} = this
? ? ? console.log(userNameInput);
? ? }
? ? render(){
? ? ? return (
? ? ? ? <div>
? ? ? ? ? {/*注釋 (currentNode)=>{this.userNameInput =currentNode} 這里邊的currentNode 為 當前的node節(jié)點 簡稱c */}
? ? ? ? ? {/*<input ref={(currentNode)=>{this.userNameInput =currentNode}} type="text"/>*/}
? ? ? ? ? <input ref={(c)=>{this.userNameInput = c}} type="text"/>
? ? ? ? ? <button onClick={this.showInputDom}>點擊顯示inpuDom</button>
? ? ? ? </div>
? ? ? )
? ? }
? }
? ReactDOM.render(<Dom/>,document.getElementById('root'))

?? ? class Dom extends React.Component{
? ? // 掛載到了自身實例上了
? ? userNameInput= (c) =>{
? ? ? this.input1 = c ;
? ? ? console.log(c);
? ? }
? ? render(){
? ? ? return (
? ? ? ? <div>
? ? ? ? ? {/*會在試圖更新時調(diào)用兩次 第一次賦值為null,第二次賦值為dom節(jié)點*/}
? ? ? ? ? {/*<input ref={(c)=>{this.userNameInput =c}} type="text"/>*/}
? ? ? ? ? {/*在試圖更新時不會調(diào)用}
? ? ? ? ? {/*<input ref={ this.userNameInput } type="text"/>*/}
? ? ? ? ? {/*注意這倆個方法是有區(qū)別的,這兩個對項目的影響可以忽略不記*/}
? ? ? ? ? <input ref={this.userNameInput} type="text"/>
? ? ? ? ? <button onClick={this.showInputDom}>點擊顯示inpuDom</button>
? ? ? ? </div>
? ? ? )
? ? }
? }
? ReactDOM.render(<Dom/>,document.getElementById('root'))