React中ref的用法

在React數據流中，父子組件唯一的通信方式是通過props屬性；那么如果有些場景需要獲取某一個真實的DOM元素來交互，這時候就要用到React的refs屬性。

1、可以給DOM元素添加ref屬性

class TestApp extends React.Component{
    constructor(props){
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleSubmit(e){
        e.preventDefault();
        console.log(`姓名：${this.nameInput.value}`);
        console.log(`學校：${ReactDOM.findDOMNode(this.refs.schoolInput).value}`);
    }
    render(){
        return(
            <form>
                <input type="text" ref={(nameInput) => {nameInput.focus();this.nameInput = nameInput}}/><br></br>
                <input type="text" ref="schoolInput"/><br></br>
                <button onClick={this.handleSubmit}>提交</button>
            </form>
        )
    };
}

上面例子實現了兩種方式，通過ref來獲取真實DOM元素。因為第二個文本框本身為真實dom元素，也可以通過this.refs.schoolInput.value來獲取值。

ref可以設置字符串，也可以設置回調函數（推薦）。

• 組件被掛載后，回調函數立即執行，回調函數的參數為該組件的具體事例。
• 組件被卸載或者原有的ref屬性本身發生變化時，回調也會被立即執行，此時回調函數參數為null，以確保內存泄露。