1. 認識refs

1.1 refs說明

1. refs是React提供的一種訪問DOM節(jié)點的方式
2. DOM節(jié)點上使用ref屬性主要有三種不同方式獲取DOM元素

2. 獲取DOM元素的使用

2.1 通過refs獲取DOM元素

說明:

1. 在DOM節(jié)點上使用ref屬性, 屬性值為自定義字符串
2. 此時就可以通過組件實例對象的refs屬性獲取所有的具有ref屬性的DOM元素,
3. 屬性refs的值是一個對象, 這個對象中的屬性就是DOM節(jié)點上ref屬性的值,屬性值就是DOM元素
4. 因此我們可以直接通過自定義的ref屬性值獲取DOM元素

示例代碼如下:

class MyCom extends React.Component{

    handleClick =() => {
        console.log(this.refs);
        /*
    打印內(nèi)容
    {
      myinput: input
      節(jié)點上ref屬性值: 對應(yīng)DOM節(jié)點
    }
    */

        // 1. 獲取DOM 節(jié)點的值
        let value = this.refs.myinput.value;

        // 2. 打印input標簽中輸入的內(nèi)容
        console.log(value);


    }

    render(){
        return (
            <div>
                <input type="text" ref="myinput"/>
                <button onClick={ this.handleClick }>點擊打印input內(nèi)容</button>
            </div>
        )
    }
}


ReactDOM.render(<MyCom/>, document.getElementById("app"))

示例說明:

1. 在需要獲取的DOM元素上添加ref屬性,自定義一個字符串的值來標記這個節(jié)點
2. 當點擊button按鈕時,在事件處理函數(shù)中,通過組件實例對象this的refs屬性,以及節(jié)點標記獲取元素
3. 然后在通過value獲取節(jié)點的值,并答應(yīng)

2.2 自定組件實例屬性獲取DOM元素

說明:

1. DOM元素上ref屬性的值除了是字符串還可以是一個函數(shù)
2. 這個函數(shù)會接受一個參數(shù),這個參數(shù)就還是當前的DOM節(jié)點
3. 在函數(shù)中給組件實例對象自定義一個屬性,并賦值這個DOM元素
4. 此時就可以通過組件實例對象獲取節(jié)點并獲取值

實例代碼:

class MyCom extends React.Component{

    handleClick =() => {
        console.log(this);
        /*
    打印內(nèi)容
    {
      input: input
      ...
    }
    */

        // 1. 獲取DOM 節(jié)點的值
        let value = this.input.value;

        // 2. 打印input標簽中輸入的內(nèi)容
        console.log(value);


    }

    render(){
        return (
            <div>
                <input type="text" ref={(input) => this.input = input}/>
                <button onClick={ this.handleClick }>點擊打印input內(nèi)容</button>
            </div>
        )
    }
}


ReactDOM.render(<MyCom/>, document.getElementById("app"))

實例說明:

1. 因為給input元素的ref賦值的是函數(shù)不是字符串,因為使用{}語法
2. 在函數(shù)中通過形參input接受到傳遞過來的input DOM元素
3. 并在函數(shù)中將這個DOM元素賦值給組件實例對象(this)的自定義屬性input
4. 因此在點擊事件函數(shù)中打印的組件實例對象(this)中就有自定義屬性input值為inputDOM元素

2.3 通過React.createRef()API獲取節(jié)點

說明:

1. 在React 16.3 版本引入了React.createRef() API,
2. 通過這個API,返回一個對象,這個對象,對象中有一個默認的current屬性,值為null
3. 此時你需要獲取那個DOM元素,就可以將這個對象作為ref屬性的屬性值
4. 那么就可以通過這個對象的current屬性獲取DOM元素

示例代碼如下:

class MyCom extends React.Component{
    
    // 給組件實例對象添加一個myInput屬性
    // 值為將要分配DOM節(jié)點的對象
    myInput = React.createRef();

    handleClick =() => {
        console.log(this);
        /*
        打印內(nèi)容
        {
          myInput:{current:input}
          ...
        }
        */

        // 1. 獲取DOM 節(jié)點的值
        let value = this.myInput.value;

        // 2. 打印input標簽中輸入的內(nèi)容
        console.log(value);


    }

    render(){
        return (
            <div>
                <input type="text" ref={this.myInput}/>
                <button onClick={ this.handleClick }>點擊打印input內(nèi)容</button>
            </div>
        )
    }
}


ReactDOM.render(<MyCom/>, document.getElementById("app"))

示例說明:

1. 在組件中創(chuàng)建一個實例對象自定義屬性myInput,
2. 這個屬性值是通過React.createRef()API創(chuàng)建的用于分配DOM元素的對象
3. 在需要獲取的input元素上添加ref屬性,屬性值,就是要分配的實例對象的自定義屬性
4. 此時就可以通過組件實例對象自定義屬性myInput的current屬性獲取到DOM元素

3. 獲取子組件實例對象

說明:

1. 上面所學的三種不同的獲取DOM節(jié)點的方法,也可以用在組件上
2. 在組件的子組件上也可以定義ref屬性
3. 通過ref獲取子組件實例對象
4. 在通過子組件的實例對象也可以調(diào)用子組件實例對象上的

示例代碼:

// 子組件
class MySon extends React.Component{
    // 組件MySon實例對象方法
    run = () => {
        console.log("子組件上的run方法");
    }

    render(){
        return (
            <div>
                這是子組件
            </div>
        )
    }
}

// 父組件
class MyCom extends React.Component{

    myInput = React.createRef();

handleClick =() => {
    console.log(this);
    /*
    打印內(nèi)容
    {
      MySon: MySon
      ...
    }
    */


    // 1. 獲取子組件實例對象
    let {MySon} = this;
    
    // 2.調(diào)用子組件實例對象上的run方法
    MySon.run()


}

render(){
    return (
        <div>
            {/* 在子組件上使用ref屬性 */}
            <MySon ref={(MySon) => this.MySon = MySon }/>
            
            <button onClick={ this.handleClick }>點擊打印input內(nèi)容</button>
        </div>
    )
}
}


ReactDOM.render(<MyCom/>, document.getElementById("app"))