React | ref三種使用方式總結

React提供的這個ref屬性，表示為對元件真正例項的引用，其實就是ReactDOM.render()返回的元件例項；需要區分一下，ReactDOM.render()渲染元件時返回的是元件例項；而渲染dom元素時，返回是具體的dom節點。
React不提倡過度使用Ref，Ref提供了一種對於react標準的資料流不太適用的情況下元件間互動的方式。

第一種：字串形式
(不推薦使用）

constructor(props) {
		super(props);
		this.showInput = this.showInput.bind(this);
}

showInput () {
		const input = this.refs.content;//ref第一種用法
		alert(input.value);
}

<input type={'text'} ref={'content'}></input>

第二種：設定回撥函式
這個函式執行的時機為：

• 元件被掛載後，回撥函式被立即執行，回撥函式的引數為該元件的具體例項。
• 元件被解除安裝或者原有的ref屬性本身發生變化時，回撥也會被立即執行，此時回撥函式引數為null，以確保記憶體洩露。

constructor(props) {
		super(props);
		this.showInput = this.showInput.bind(this);
}

showInput () {
		alert(this.inputs.value);//this指向元件物件的inputs屬性的值
}

//this指向元件物件，把input儲存到元件物件上,屬性名叫inputs
<input type={'text'} ref={(inputData) => this.inputs = inputData}></input> 

第三種：React.CreateRef()
通過在class中使用React.createRef()方法建立一些變數，可以將這些變數繫結到標籤的ref中

constructor(props) {
		super(props);
		this.myRef = React.createRef();
		this.showInput = this.showInput.bind(this);
}

showInput () {
		//該變數的current則指向繫結的標籤dom
		alert(this.myRef.current.value);
}

<input type={'text'} ref={this.myRef}></input>

<script type="text/babel">

        
        class Index extends React.Component {

            constructor(props) {
                super(props);
                this.showInput = this.showInput.bind(this);
                this.handleBlur = this.handleBlur.bind(this);
                this.myRef = React.createRef();
            }

            showInput () {
                const input = this.refs.content;//ref第一種用法
                alert(input.value);
                alert(this.inputs.value);//ref第二種用法
                alert(this.myRef.current.value+'1');//ref第三種用法
            }

            handleBlur (event) {
                alert(event.target.value);
            }

            render() {
                return (
                    <div>
                        <input type={'text'} ref={this.myRef}></input>&nbsp;&nbsp;
                        <input type={'text'} ref={'content'}></input>&nbsp;&nbsp;
                        <input type={'text'} ref={(inputData) => this.inputs = inputData}></input>&nbsp;&nbsp;
                        <button onClick={this.showInput}>提示輸入</button>&nbsp;&nbsp;
                        <input type={'text'} onBlur={this.handleBlur} placeholder='失去焦點提示內容' ></input>
                    </div>
                )
            }
        }

        ReactDOM.render(<Index />, document.getElementById('test'));
        

    </script>