'ref' 纯反应中的声明

Question

我正在学习 Dan abramov 在 egghead.io 上的 redux 课程，他创建了一个输入字段并分配了一个 ref 属性，它看起来像一个功能性的 assignment.The 代码如下，

<input ref={node => {input = node;}} />
    
<button onClick={() => { input.value = ''}> ADD</button>

能否请您解释一下，提前致谢！

Answer 1

这可能有帮助

const inputRef = React.useRef(null); // create ref of input using Hooks

<input ref={inputRef} /> // render input field and assign ref to it
    
// render button and when click on it, it reassign the input value to empty     
<button onClick={() => { inputRef.current.value = '' } > ADD </button>

Answer 2

这是一项名为 callback refs 的功能。如果您将一个函数传递给 ref，它将以 DOM 元素作为参数被调用，您可以用它做任何您想做的事情。在您的示例中，该元素已分配给 input 变量。

在某些情况下，您必须“转义”React 模型并需要访问底层 DOM 元素（例如，用于控制焦点），而 refs 是一种（？）方式来做到这一点。

Answer 3

当我们想要访问dom元素对象时，我们使用“ref”。这是获取 dom 对象的反应方式。

您可以使用传统方式获取 dom 对象 document.getElementById("inputId") 但问题是您需要将其用于正确的生命周期，否则你可能得不到元素。

ref 的另一个优点是如果组件被销毁，您的 ref 对象也将被销毁。

示例：

<input id="inputId" ref={node => {input = node;}} />
    
<button onClick={() => { input.value = ''}> ADD</button>

console.log(input)

console.log(document.getElementById("inputId"))

两个控制台将指向相同的 dom 元素

检查此以了解更多详细信息https://reactjs.org/docs/refs-and-the-dom.html

'ref' 纯反应中的声明

'ref' declaration in pure react

html

ref

reactjs