React_ref运用，ref获取子组件状态值，ref调用子组件方法，ref获取input的值

爱被打了一巴掌 2023-02-13 03:40 55阅读 0赞

# 获取子组件状态值，ref调用子组件方法 #

## 方式一 ##

//父组件
    class Main extends React.Component{ 
    	candleClick(){ 
    		//获取子组件状态值
    		console.log(this.refs.checkRef.state);
    		//调用子组件方法
    		this.refs.checkRef.abc()
    		//获取子组件方法返回值
    		console.log(this.refs.checkRef.fu())
    	}
    	render(){ 
    		return (
    			<div>
    				<Check ref="checkRef" />
    				<button onClick={ ()=>this.candleClick()}>click</button>
    			</div>
    		)
    	}
    }
    //子组件
    class Check extends React.Component{ 
    	constructor(props){ 
    		super();
    		this.state = { 
    			name:'张三',
    		}
    	}
    	abc(){ 
    		console.log('子组件方法被调用啦');
    	}
    	fu(){ 
    		return 123
    	}
    	render(){ 
    		return (
    			<div></div>
    		)
    	}
    }

## 方法二 ##

//父组件
    class Main extends React.Component{ 
    	candleClick(){ 
    		//获取子组件状态值
    		console.log(this.checkRef.state);
    		//调用子组件方法
    		this.checkRef.abc()
    		//获取子组件方法返回值
    		console.log(this.checkRef.fu())
    	}
    	render(){ 
    		return (
    			<div>
    				{ /* dom相当于整个组件 当前组件定义了一个checkRef属性，将子组件这个dom给了checkRef属性 */}
    				<Check ref={ (dom) => { this.checkRef = dom}} />
    				<button onClick={ ()=>this.candleClick()}>click</button>
    			</div>
    		)
    	}
    }
    //子组件
    class Check extends React.Component{ 
    	constructor(props){ 
    		super();
    		this.state = { 
    			name:'张三',
    		}
    	}
    	abc(){ 
    		console.log('子组件方法被调用啦');
    	}
    	fu(){ 
    		return 123
    	}
    	render(){ 
    		return (
    			<div></div>
    		)
    	}
    }

# 获取input的值 #

## 第一种方式 ##

class Maa extends React.Component{ 
    	fun=()=>{ 
    		console.log(this.refs.demoinput.value)
    	}
    	
    	render(){ 
    		return(
    			<div>
    				<input type="text" ref="demoinput" />
    				<button onClick={ this.fun}>点击获取值</button>
    			</div>
    		)
    	}
    }

## 第二种方式 ##

回调函数方式  
就是在dom节点上或者组件上挂载函数

fun=()=>{ 
    	console.log(this.textinput.value)
    }
    
    render(){ 
    	return(
    		<div>
    			<input type="text" ref={ (input)=>{ this.textinput=input}} />
    			<button onClick={ this.fun}>点击获取值</button>
    		</div>
    	)
    }

## 第三种方式 ##

把值付给一个变量 通过ref挂载在节点或者组件上 使用ref的current属性拿到这个节点

constructor(props){ 
    	super(props)
    	this.myref=React.createRef();
    }
    fun=()=>{ 
    	console.log(this.myref.current.value)
    }
    
    render(){ 
    	return(
    		<div>
    			<input type="text" ref={ this.myref} />
    			<button onClick={ this.fun}>点击获取值</button>
    		</div>
    	)
    }