import React from 'react'
export default class RefDemo extends React.Component {
constructor() {
super()
this.objRef = React.createRef()//第一种
// { current: null }
}
componentDidMount() {
// console.log(`span1: ${this.refs.ref1.textContent}`)
// console.log(`span2: ${this.ref2.textContent}`)
// console.log(`span3: ${this.ref3.current.textContent}`)
setTimeout(() => {
this.refs.stringRef.textContent = 'string ref got'
this.methodRef.textContent = 'method ref got'
this.objRef.current.textContent = 'obj ref got'
}, 2000)
}
render() {
return <div>
<p ref="stringRef">span1</p>//第三种
<p ref={ele => (this.methodRef = ele)}>span2</p>//第二种
<p ref={this.objRef}>span3</p>
</div>
}
}
强调外部函数获取ref
import React from 'react'
// 函数组件也想拿到dom 通过 ref
const TargetFunction = React.forwardRef((props,ref)=>(
<input type="text" ref={ref}/>
))
export default class FrodWordRefDemo extends React.Component {
constructor() {
super()
this.ref = React.createRef()
}
componentDidMount() {
this.ref.current.value = 'ref get input'
}
render() {
return <TargetFunction ref={this.ref}>
</TargetFunction>
}
}