React：refs

1.refs字符串形式（官方不推荐）

class Demo extends React.Component{

			render(){

				return(<div>
	<input ref='input1' type="text"placeholder="点击按钮提示数据" />

	<button onClick={this.showData}>按钮</button>

	<input onBlur={this.blurData} ref='input2' type='text' placeholder="失去焦点提示数据"/>
					  </div>)
			}
		
		showData=()=>{
			alert(this.refs.input1.value)
		}

		blurData=()=>{
			alert(this.refs.input2.value)
		}
  } 

2.refs回调函数形式

<input ref={(a)=>{console.log(a)} type="text"placeholder="点击按钮提示数据" />
// <input type="text"placeholder="点击按钮提示数据" />
输出当前节点，即传参a为当前节点

class Demo extends React.Component{
			render(){

				return(<div>
	<input ref={ (c) = >{ this.input1=c } } type="text"placeholder="点击按钮提示数据" />

	<button onClick={this.showData}>按钮</button>

	<input onBlur={this.blurData} ref={ (c) => { this.input2=c } } type='text' placeholder="失去焦点提示数据"/>
					</div>)
			}
		
		showData=()=>{
			alert(this.input1.value)
		}

		blurData=()=>{
			alert(this.input2.value)
		}
}

3.refs API形式

class Demo extends React.Component{
      myRef只能存放一个节点，不能复用，所以定义两次
			myRef1=React.createRef()
			myRef2=React.createRef()

			render(){

				return(<div>
					<input ref={ this.myRef1 } type="text"placeholder="点击按钮提示数据" />
					<button onClick={this.showData}>按钮</button>
					<input onBlur={this.blurData} ref={ this.myRef2 } type='text' placeholder="失去焦点提示数据"/>
					</div>)
			}
		
		showData=()=>{
			console.log(this.myRef1)//current:input
			alert(this.myRef1.current.value)
		}

		blurData=()=>{
			console.log(this.myRef2)
			alert(this.myRef2.current.value)
		}
}