React中ref的用法

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

一、能夠給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，以確保內存泄露。