React----ref的使用

最新推荐文章于 2023-10-19 10:57:15 发布

原创最新推荐文章于 2023-10-19 10:57:15 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react

博客介绍了React中ref的使用方法。包括将字符串赋值给ref，可获得DOM元素，读取时用this.refs.xxx；将函数赋值给ref，函数接收当前元素，在函数体内给实例增加属性并赋值，读取用this.xxx；还可在实例下定义属性存储React.createRef()的值。

1.将字符串赋值给ref (读取时： this.refs.xxx)

<div>
       <input ref="userName" name="userName" type="text"/>
       <input ref="passWord" name="passWord" type="password"/>
       <button onClick={()=>{
       // console.log(document.querySelector("input").value)
       // refs:是一个对象，对象里包含当前组件内拥有ref属性的元素
       console.log(this.refs.userName.value,this.refs.passWord.value)
       this.refs.userName.value = null;
       this.refs.passWord.value = null;
       // console.log(this.refs.userName === document.querySelector("input"))
       }}>点我</button>
</div>

ref可以获得DOM元素，一般还可以与组件结合使用。

2、将函数赋值给ref,函数接收的参数是当前ref所在的元素。
在该函数体内给当前实例增加一个属性，并将接收的参数赋值给该属性。
读取时： this.xxx

<div>
	   {
	      // el是当前ref所在的元素。
	      // <input ref={(el)=>console.log(el)} name="userName" type="text"/>
	      //<input ref={(el)=>console.log(el)} name="passWord" type="password"/>
	   }
	   <input ref={(el)=>this.userName=el} name="userName" type="text"/>
	   <input ref={(el)=>this.passWord=el} name="passWord" type="password"/>
	   <button onClick={()=>{
	  		 console.log(this.userName.value,this.passWord.value)
	   }}>点我</button>
</div>

3、在当前实例下定义一个属性存储React.createRef()的值

class App extends React.Component{
        constructor() {
            super();
            // 将React.createRef()返回结果赋值给了this.userName.
            // React.createRef()的返回结果是一个对象，对象当中有一个名为current的属性值为null
            this.userName = React.createRef();
            this.passWord = React.createRef();
        }
        render(){
            console.log(this.userName,this.passWord)
            return (
                <div>
                    {
                        // 将ref所在的元素赋值给this.userName对象当中的current属性。
                    }
                    <input ref={this.userName} name="userName" type="text"/>
                    <input ref={this.passWord} name="passWord" type="password"/>
                    <button onClick={()=>{
                        console.log(this.userName.current.value,this.passWord.current.value)
                    }}>点我</button>
                </div>
            )
        }
    }