一、React.creactRef()
在dom元素上使用createRef
constructor(){
super()
//创建一个ref的引用
this.textInput = React.createRef();
}
render(){
return{
//在DOM中使用ref
<input ref={this.textInput} type="text"></input>
}
}
在类组件上使用createRef
//父组件
export default class AutoFocusTextInput extends React.Component {
constructor() {
super()
//第一步:创建ref
this.textInput = React.createRef();
}
//组件挂载完毕
componentDidMount() {
//this.textInput.current 其实就是TextInput组件对象
//现在我们要做的事情就是让TextInput组件中的input文本框自动获取焦点
// console.log(this.textInput.current)
//调用子组件对象的focusInputText()方法
this.textInput.current.focusInputText()
}
render() {
return (<div>
AutoFocusTextInput
{/*在使用子组件的时候,通过ref来引用组件对象,此时this.textInput代表子组件*/}
<TextInput ref={this.textInput}></TextInput>
</div>)
}
}
//子组件
class TextInput extends React.Component {
constructor() {
super()
this.input = React.createRef();
}
//该方法的目的就是让input文本框获取焦点
focusInputText = () => {
this.input.current.focus();
}
render() {
return (<div>
<input ref={this.input} type="text"></input>
</div>)
}
}
二、ref回调
基本使用
//第一种方法,在构造函数中创建ref
constructor() {
super()
this.setInputRef = (element) => {
this.input = element;
}
}
{/*通过回调函数的方式指定ref*/}
<input
type="text"
ref={this.setInputRef}
/>
{/*第二种方法:直接入参回调函数的方式指定ref*/}
<input
type="text"
ref={(element) => { this.input2 = element }}
/>
父子组件传递回调函数ref
import React from 'react'
//子组件
function CustomTextInput(props) {
return (<div>
<input ref={props.inputRef}></input>
</div>)
}
//父组件
export default class PassCallBackRef extends React.Component {
constructor() {
super()
}
clickHandler = ()=>{
console.log(this.input.value,"子组件input的数据")
}
render() {
return (
<div>
{/*父组件中使用子组件的时候传递了一个inputRef属性,但是这个属性值是一个回调函数的ref,在孩子中使用了这个回调函数ref
此时就相当于父亲的this.input引用了孩子的input元素
*/}
<CustomTextInput inputRef={el => { this.input = el }}></CustomTextInput>
<button onClick={this.clickHandler}>点我获取数据</button>
</div>
)
}
}