解构赋值ref 当前节点的值为空

Question

//类组件获取input节点元素
<input ref={currentNode => this.username = currentNode} />
//函数组件获取input节点元素
let username
<input ref={currentNode => username = currentNode} />

这个是react的标准写法，我们在ref里面定义一个回调函数，并把当前节点挂在input上面用于稍后获取this.username.value或者username.value

//类组件获取input节点元素
<input ref={currentNode => this.username = currentNode.value} />
//函数组件获取input节点元素
let username
<input ref={currentNode => username = currentNode.value} />

如果我想在ref里面定义的这个回调函数直接获取currentNode.value，并把返回值赋值给username，每次都是null.
请问这个是为什么阿，感谢各位大神的指点。

Answer 1

先看看ref回调函数执行时机：

React will call the ref callback with the DOM element when the component mounts, and call it with null when it unmounts.

按照你的写法导致组件挂载后this.username/username变量的值只是input组件初始值。