React(9)-组件引用传递(高级应用)
目录
受控组件
非受控组件
组件应用传递
需求：获取子组件中某个DOM实例
1.类组件形式
2.函数组件形式
调用React.forwardRef()引用转发：引用地址的转发，自动传递ref的一种技术。
受控组件
非受控组件
组件应用传递
//类组件
class ChildInput extends React.Component{
render(){
return(
<div>
<h2>child input</h2>
<inpur type="text" />
</div>
)
}
}
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(
<div>
<ChildInput callbackRef = {this.callbackRef} />
<button onClick={this.handleClick}>commit</button>
</div>
)
}
}
需求：获取子组件中某个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(
<div>
<h2>child input</h2>
<inpur type="text" ref={this.props.callbackRef}/>
</div>
)
}
}
class FatherForm extends React.Componet{
callbackRef=(e)=>{
console.log(this) //父组件实例
this.inputRef = e
}
handleClick=()=>{
console.log(this) //父组件实例
//需求：获取子组件中某个DOM
this.inputRef.focus()
}
render(){
return(
<div>
<ChildInput callbackRef = {this.callbackRef} />
<button onClick={this.handleClick}>commit</button>
</div>
)
}
}
2.函数组件形式
注意：函数组件没有this，没有实例的概念，传值依靠props
function ChildInput(props){
render(){
return(
<div>
<h2>child input</h2>
<inpur type="text" ref={props.callbackRef}/>
</div>
)
}
}
class FatherForm extends React.Componet{
callbackRef=(e)=>{
this.inputRef = e
}
handleClick=()=>{
this.inputRef.focus()
}
render(){
return(
<div>
<ChildInput callbackRef = {this.callbackRef} />
<button onClick={this.handleClick}>commit</button>
</div>
)
}
}
调用React.forwardRef()引用转发：引用地址的转发，自动传递ref的一种技术。
function ChildInput(props){
render(){
return(
<div>
<h2>child input</h2>
<inpur type="text" ref={props.callbackRef}/>
</div>
)
}
}
function ChildInput2(props,ref){ //子组件添加ref参数接
render(){
return(
<div>
<h2>child input</h2>
<inpur type="text" ref={ref}/> // 地址=>{current:null}=>{current:input}
</div>
)
}
}
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(
<div>
<ChildInput callbackRef = {this.callbackRef} />
<RefChildInput2 ref={this.inputRef1}/>
<button onClick={this.handleClick}>commit</button>
</div>
)
}
}
