React refs 进阶篇 一 回调形式的refs
注:回调形式的refs 分为两种
一、内联函数形式应用
class Demo extends React.Component{
render(){
return (
<div>
回调形式refs内联函数形式
注:内联函数形式 更新数据时会触发两次,第一次调用返回为null 第二次返回当前节点
<input ref={ C => this.input = C} type="text"/>
<button onClick={this.showData}>点击</button>
</div>
)
}
// 显示左侧input内容
showData = ()=>{
const {input} = this
alert(input.value)
}
}
ReactDOM.render(<Demo/>,document.getElementById('test'))
二、将回调函数改为class绑定形式
class Demo extends React.Component{
render(){
return (
<div>
回调形式refs类绑定式,放在了实例自身,需要在实例自身写回调函数
<input ref={this.saveInput} type="text"/>
<button onClick={this.showData}>点击</button>
</div>
)
}
// 显示左侧input内容
showData = ()=>{
const {input} = this
alert(input.value)
}
// input输入框refs回调函数类绑定 方法
saveInput = (c) =>{
this.input = c
}
}
ReactDOM.render(<Demo/>,document.getElementById('test'))