1，字符串形式
<!-- 创建盒子 -->
<div id="test">
</div>
<script type="text/babel">
class Demo extends React.Component{
render(){
return(
<div>
<input type="text" ref='input1' />
<button onClick={this.showDate}>点我提示左侧的数据</button>
<input type="text" onBlur={this.shhowDate1} ref='input2'/>
</div>
)
}
showDate = () =>{
console.log(this.refs.input1.value,'input1')
}
shhowDate1 = () =>{
console.log(this.refs.input2.value,'input1')
}
}
ReactDOM.render(<Demo />,document.getElementById('test'))
</script>2,回调形式
/**
* 1,在标签上使用回调形式
* <input type="text" ref={c =>this.input1 = c }/>
* 2,使用获取
* this.input1
* **/ <!-- 创建盒子 -->
<div id="test">
</div>
<script type="text/babel">
class Test extends React.Component {
render(){
return (
<div>
<input type="text" ref={c =>this.input1 = c }/>
<button onClick={this.showDate}>点我</button>
<input type="text" ref={c =>this.input2 = c}/>
</div>
)
}
showDate = () =>{
console.log(this.input1.value)
console.log(this.input2.value)
}
}
ReactDOM.render(<Test />,document.getElementById('test'))
</script>
3,createRef形式
/**
* 1,引用语法
* aaa = React.createRef()
* 2,定义在标签上
* <input type="text" ref={this.aaa}/>
* 3,使用获取
* console.log(this.aaa.current.value,'this.mydata')
* **/ <script type="text/babel">
class MyComponent extends React.Component{
/**
* 1,引用语法
* React.
* **/
mydata = React.createRef()
mydata1 = React.createRef()
render(){
return (
<div>
<input type="text" ref={this.mydata}/>
<button onClick={this.clickDate} >点击</button>
<input type="text" ref={this.mydata1} onBlur={this.clickDate1}/>
</div>
)
}
clickDate = () =>{
console.log(this.mydata.current.value,'this.mydata')
}
clickDate1 = () =>{
console.log(this.mydata1.current.value,'this.mydata1')
}
}
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
</script>
