2024-10-25
react组件实例有三大属性state, props, refs。 state不必说，状态管理，props是数据传送，唯有ref不是很清楚。
使用方式分别是this.state, this.props, this.refs。
我们经常会在html做输入框，或者叫input框。
<input placeholder="点击输入数据"/>
我们如何获取输入框的值，照理来说就是xxx.value，对吗？但是，我们怎么知道你要获取的是哪个输入框呢？这时候就需要id了。
<input id="input1" placeholder="点击输入数据"/>
我们要怎么获取它的值呢？自然要用Dom了。
const input = document.getElementById('input1')
console.log(input.value)
这样就能够拿到了。等等，我们用react的目的不就是有虚拟DOM，不用操作真实DOM吗？所以，一定有其他方法。这就是今天介绍的refs了。
我们可以用ref属性获取input的值。
<input ref='input1' placeholder="点击输入数据"/>
获取出来的值：
console.log(this.refs.input1) //获取按钮
const {input1} = this.refs //解构赋值
console.log(input1.value)
注意，每个ref都是refs对象里面的key-value值，即this.refs={input1:input, button1:button...}
有字符串形式的ref好像已经够了，为什么需要有回调函数形式的呢？
因为react官方已经废弃掉字符串形式了，参见过时 API：String 类型的 Refs，官方说明会造成一些问题，问题讨论得比较复杂，简单来说，调用会出现一些效率问题。
取代字符串形式的ref有两种方法，一种是回调函数形式的ref，一种是createRef方法。
我们看看回调函数怎么写。
回调函数有三大特点：1. 你定义的函数；2. 你没有调用；3. 最终被他人调用。
<input ref={(currentNode)=>{console.log(currentNode.value)}} placeholder="点击输入数据"/>
我们在ref里面随便传入一个参数，不管是a还是我写的currentNode，console.log之后就会发现是当前节点, 这个时候.value就可以拿到值了。
简单的写法可以是这样的：
<input ref={c=>console.log(c.value)} placeholder="点击输入数据"/>
怎么在function里面拿到它的值呢？首先要将该input框抽出来。
<input ref={c=>this.selectNumber=c} placeholder="点击输入数据"/>
这里我们在class component里面定义了一个selectNumber的值，让它等于抽出来的input，这里把currentNode简写成c。
那么我们可以在其他函数里面利用input的值，像这样：
function addNumber(){
const {value} = this.selectNumber
}
下次再分享。