（五）React的三大特性 refs
简介：
使用refs 组件内的标签可以定义ref属性来标识自己
such as： 注意在使用的是 this.refs refs
1.字符串形式的refs使用
（不推荐使用 原因就是存在一些效率的问题 我觉得就是收集获取的时候存在问题吧）
案例的作用 点击按钮获取相关节点的数据 另一个是失去焦点的时候获取节点的数据
//创建组件
class Demo extends React.Component{
//展示左侧输入框的数据
showData = ()=>{
const {input1} = this.refs
alert(input1.value)
}
//展示右侧输入框的数据
showData2 = ()=>{
const {input2} = this.refs
alert(input2.value)
}
render(){
return(
<div>
<input ref="input1" type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
//渲染组件到页面
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
2.回调形式的refs使用
把ref当前所处的节点挂在了实例自身上并且取了个名字叫input1
这个ref就是获取当前的这个节点
//创建组件
class Demo extends React.Component{
//展示左侧输入框的数据
showData = ()=>{
const {input1} = this
alert(input1.value)
}
//展示右侧输入框的数据
showData2 = ()=>{
const {input2} = this
alert(input2.value)
}
render(){
return(
<div>
//把ref当前所处的节点挂在了实例自身上并且取了个名字叫input1
<input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input onBlur={this.showData2} ref={c => this.input2 = c } type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
//渲染组件到页面
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
使用内联函数的方式 ，更新的时候会出发两次 ，原因是因为之前的内联函数清空了 要重新加载
解决方法就是，不使用内联函数的方式 ，要使用class连接回调的形式
举例子：
//创建组件
class Demo extends React.Component{
state = {isHot:false}
showInfo = ()=>{
const {input1} = this
alert(input1.value)
}
changeWeather = ()=>{
//获取原来的状态
const {isHot} = this.state
//更新状态
this.setState({isHot:!isHot})
}
saveInput = (c)=>{
this.input1 = c;
console.log('@',c);
}
render(){
const {isHot} = this.state
return(
<div>
<h2>今天天气很{isHot ? '炎热':'凉爽'}</h2>
{/*<input ref={(c)=>{this.input1 = c;console.log('@',c);}} type="text"/><br/><br/>*/}
<input ref={this.saveInput} type="text"/><br/><br/>
<button onClick={this.showInfo}>点我提示输入的数据</button>
<button onClick={this.changeWeather}>点我切换天气</button>
</div>
)
}
}
//渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))
3.createRef的方式：应该就是创建一个节点进行绑定：
简介： 调用后可以返回一个容器 该容器可以存储被ref所标识的节点
这个是专人专用的 要是你每次都添加索引在每个元素上 然后使用的时候要每次都创建 createRef()
//创建组件
class Demo extends React.Component{
/*
React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的
*/
myRef = React.createRef()
myRef2 = React.createRef()
//展示左侧输入框的数据
showData = ()=>{
alert(this.myRef.current.value);
}
//展示右侧输入框的数据
showData2 = ()=>{
alert(this.myRef2.current.value);
}
render(){
return(
<div>
<input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
//渲染组件到页面
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
总结： 字符串是最简单的 ， 然后就是回调函数的这种形式的， 又是内联函数的形式， 通过参数取值进行相应的绑定，但是有个问题就是内联形式的方式有问题会触发两次，解决方案就是要改成class的绑定形式，也就是类绑定的形式进行解决，但是调用两次无关紧要大多数情况下是没有什么事情的 。最后就是进行createRef的形式 是一个新的API的形式。需要进行每个的新建饭后进行索引 而且是专一使用的。