-
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(
)
}
}
-
相关阅读:
工程制图知识点
qtdesigner添加菜单栏工具栏及监听事件
配电室远程运维平台：现代化的电力管理解决方案
【Qt】QGroundControl入门4：框架QGCApplication
C语言程序设计核心详解 第四章&&第五章 选择结构程序设计&&循环结构程序设计
渗透测试 ( 5 ) --- 扫描之王 nmap、渗透测试工具实战技巧合集
低代码开发那些事儿
带你全流程，全方位的了解属于测试的软件事故
Alibaba Cloud Linux 3.2104 LTS 64位 怎么安装python3.10.12和pip3.10
【晶振专题】案例：为什么对着STM32低速32.768K晶振哈口气就不起振了？
- 原文地址：https://blog.csdn.net/m0_65912225/article/details/126626467