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

获取子组件状态值，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>
	)
}