标签：input1 render refs React nbsp 组件 三大
（五）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的形式。需要进行每个的新建饭后进行索引 而且是专一使用的。
标签：input1,render,refs,React,nbsp,组件,三大 来源： https://www.cnblogs.com/tcz1018/p/15406703.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。