-
React(9)-组件引用传递(高级应用)
目录
调用React.forwardRef()引用转发：引用地址的转发，自动传递ref的一种技术。
受控组件
非受控组件
组件应用传递
//类组件
class ChildInput extends React.Component{
render(){
return(
child input
)
}
}
class FatherForm extends React.Componet{
constructor(){
super()
this.inputRef = React.createRef() //容器：{current:null}
}
callbackRef=(e)=>{
this.inputRef = e
}
handleClick=()=>{
console.log(this.inputRef)//获取到子组件实例
console.log(this.inputRef.current) //获取不到子组件中DOM操作
}
render(){
return(
)
}
}
需求：获取子组件中某个DOM实例
通过回调函数的方式：给子组件传递一个回调函数callback，子组件通过ref={callback},把子组件具体DOM挂载在父组件上，使得父组件可以获取子组件的值。
1.类组件形式
class ChildInput extends React.Component{
//this.props = props 自动操作
render(){
console.log(this.props)
console.log(this.props.callbackRef)
return(
child input
)
}
}
class FatherForm extends React.Componet{
callbackRef=(e)=>{
console.log(this) //父组件实例
this.inputRef = e
}
handleClick=()=>{
console.log(this) //父组件实例
//需求：获取子组件中某个DOM
this.inputRef.focus()
}
render(){
return(
)
}
}
2.函数组件形式
注意：函数组件没有this，没有实例的概念，传值依靠props
function ChildInput(props){
render(){
return(
child input
)
}
}
class FatherForm extends React.Componet{
callbackRef=(e)=>{
this.inputRef = e
}
handleClick=()=>{
this.inputRef.focus()
}
render(){
return(
)
}
}
调用React.forwardRef()引用转发：引用地址的转发，自动传递ref的一种技术。
function ChildInput(props){
render(){
return(
child input
)
}
}
function ChildInput2(props,ref){ //子组件添加ref参数接
render(){
return(
child input
// 地址=>{current:null}=>{current:input} )
}
}
const RefChildInput2 = React.forwardRef(ChildInput2)
class FatherForm extends React.Componet{
constructor(){
super()
this.inputRef1 = React.createRef()
}
callbackRef=(e)=>{
this.inputRef2 = e
}
handleClick=()=>{
//点击input2自动获取焦点
this.inputRef2.focus()
//点击input1自动获取焦点
console.log(thiis)
this.inputRef1.current.focus()
}
render(){
return(
)
}
}
-
相关阅读:
拉勾教育 | Java 性能优化实战 21 讲
优秀硕士毕业生发言稿
【java】mybatis拦截器实现单表对于geometry类型字段的新增查询更新
SpringMVC（四万五字超详细笔记）
2022最新前端vue面试题
apollo源码解读：/cyber/scheduler 模块
一波三折的react + less
求平均查找长度（成功+失败）
【Python】《Python编程：从入门到实践 (第2版) 》笔记-Chapter6-字典
C++学习日记：关于我决定开始学习C++的那些事
- 原文地址：https://blog.csdn.net/m0_65912225/article/details/126626467