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>
)
}
}