React系列-组件三大属性（ref）

字符串形式的ref

class Index extends React.component{
    showData=()=>{
        const {input1}=this.refs;
        alert(input1.value)
    }
    //debbuger; 可以打断点
    render(){
        return (
            <div>
                <input ref="input1" type="text" />
                <button onClick={this.showData}>点击</button>
            </div>	
        )
    }
}
//但字符串形式的ref由于其效率不高，已经不被官方推荐了

回调函数形式的ref

class Index extends React.component{
    showData=()=>{
        const {input1}=this;
        alert(input1.value)
    }
    showData2=()=>{
        const {input2}=this;
        alert(input2.value)
    }
    render(){
        return (
            <div>
                <input ref={c=>this.input1=c} type="text" />
                <button onClick={this.showData}>点击提醒左侧</button>
                <input onBlur={this.showData2} ref={c=>this.input2=c}>
            </div>
        )
    }
}  

回调函数中调用次数的问题

每一次组件更新会调用两次ref，第一次传的为null，第二次传的是真正节点

解决方法：写成的类的绑定函数事件

<input ref={this.saveInput} type="text" />

saveInput=c=>{
    this.input1=c;
}   //再次页面更新时，不会再多次调用了，不过多次调用的问题并不会影响什么

createRef的使用

class Demo extends React.component{
    myRef={
        input1:react.createRef(),
        input2:react.createRef()
    }
	showData=()=>{
        console.log(this.myRef.input1.current.value)
        console.log(this.myRef.input2.current.value)
    }
	render(){
        return(
            <div>
            	<input ref={this.myRef.input1} type="text" />
                <input ref={this.myRef.input2} type="text" />
                <button onClick={this.showData}>点击</button>
            </div>
        )
    }
}

总结ref

回调形式的使用内联函数无关紧要，最为推荐的还是createRef