-
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(
)
}
}
-
相关阅读:
Educoder Spring 初体验
LVGL_基础控件进度条bar
ArduPilot添加新的惯导方案
Redis注解式开发结合SSM项目使用与Quartz框架介绍以及击穿、穿透、雪崩问题解决
TensorFlow 2.x
还在失眠？试试镁吧
网络安全（黑客）自学
目标识别项目实战：基于Yolov7-LPRNet的动态车牌目标识别算法模型
MPJ: MyBatis-Plus-Join连表查询
RabbitMQ学习总结-延迟消息
- 原文地址：https://blog.csdn.net/m0_65912225/article/details/126626467