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，以确保内存泄露。