react useref_使用“ useRef”挂钩React不受控制的元素

react useref

TechnoFunnel provides another article that is focussed on working with Uncontrolled Elements in React using “useRef” Hooks. We will be working with the latest features of Hooks in order to work with the following functionality. Uncontrolled Elements are the elements whose values and properties are handled using DOM reference.

TechnoFunnel提供了另一篇文章，其重点是使用“ useRef” Hooks在React中使用不受控制的元素。 我们将使用挂钩的最新功能，以便使用以下功能。 不受控制的元素是使用DOM引用处理其值和属性的元素。

什么是React不受控制的元素？ (What is React Uncontrolled Elements ?)

演示地址

Uncontrolled Elements in React

React中不受控制的元素

“useRef” React Hook can be used to create Uncontrolled Elements. These elements can be accessed using the DOM Reference. While creating an Uncontrolled Element, we use the keyword “ref”, which points out to a reference object, storing the DOM reference of the elements rendered in the component. Users can then use this reference to make updates to the component.

“ useRef ” React Hook可用于创建不受控制的元素。 可以使用DOM参考访问这些元素。 创建不受控制的元素时 ，我们使用关键字“ ref ”，它指向参考对象，存储在组件中呈现的元素的DOM参考。 然后，用户可以使用此引用来更新组件。

Uncontrolled Elements do not notify the component about the change in Element Property or Values, due to which the render cycle is not triggered when a component is updated using “ref”. It's like a traditional DOM reference that we used to refer to using jQuery.

不受控制的元素 不会将元素属性或值的更改通知组件 ，因此，使用“ ref ”更新组件时， 不会触发渲染周期 。 就像我们过去使用jQuery引用的传统DOM引用一样。

什么时候应该使用不受控制的元素？ (When Should be Use Uncontrolled Elements ?)

演示地址

When to use Uncontrolled Elements in React

何时在React中使用不受控制的元素

Using Uncontrolled Elements provides simplicity to your program, you need not worry about Rendering Cycle and other lifecycle events. It can simply refer to the DOM element an update the required properties. Using an Uncontrolled element is fine for simple forms that do not require any pre-processing or validations. We can simply fetch the data on form submit using these uncontrolled elements.

使用不受控制的元素可以简化程序 ，您无需担心渲染周期和其他生命周期事件。 它可以简单地引用DOM元素来更新所需的属性。 对于不需要任何预处理或验证的简单表单，使用不受控制的元素很好。 我们可以使用这些不受控制的元素来简单地获取表单提交中的数据。

But, if you require functionalities like ensuring input formats, client-side validations, disabling the submit buttons and other functionalities on the basis of user input, adding dynamic features to the form, then we can use Controlled Elements

但是，如果您需要诸如确保输入格式，客户端验证，基于用户输入禁用提交按钮等功能，向表单添加动态功能的功能，那么我们可以使用受控元素

用于设置输入值的不受控制的元素 (Uncontrolled Elements for Setting Input Values)

演示地址

React Form components can be either controlled or uncontrolled. We will look into getting the input control value using the keyword “ref”. Let's create a small component to illustrate the implementation of Uncontrolled elements.

React Form组件可以是受控的，也可以是不受控制的 。 我们将研究使用关键字“ ref ”获得输入控制值。 让我们创建一个小组件来说明Un受控元素的实现。

import React, { useRef } from "react";
import "./styles.css";


export default function App() {
  const inputRef = useRef();


  function updateValue() {
    inputRef.current.value = "Anshul";
  }


  function getValue() {
    alert(inputRef.current.value);
  }


  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      Uncontrolled Element: <input type="text" ref={inputRef} />
      <input type="button" onClick={updateValue} value="Click to Update" />
      <input type="button" onClick={getValue} value="Click to Get Values" />
    </div>
  );
}

In the component above, we have created a reference object that can point to a DOM element using the keyword “useRef”, we can then use this object in some input element using the “ref” keyword. “ref” keyword is assigned with a “useRef” object that is created and can then be used to access the DOM properties of the “input” element.

在上面的组件中，我们创建了一个引用对象，该对象可以使用关键字“ useRef ”指向DOM元素，然后可以使用“ ref ”关键字在某些输入元素中使用该对象。 关键字“ ref ”被分配了一个“ useRef ”对象，该对象已创建，然后可用于访问“ input”元素的DOM属性。

演示地址

https://codesandbox.io/s/solitary-sound-iutpt?fontsize=14&hidenavigation=1&theme=dark https://codesandbox.io/s/solitary-sound-iutpt?fontsize=14&hidenavigation=1&theme=dark

样式和动画的不受控制的元素 (Uncontrolled Elements for Styles and Animation)

We can also use uncontrolled elements for styling and animation. We can use the reference variable to access the DOM properties and can then update the styles and can animate elements. In the example below, we will see functionality to update the styling of elements using “useRef” Hook.

我们还可以将不受控制的元素用于样式和动画。 我们可以使用引用变量来访问DOM属性，然后可以更新样式并可以对元素进行动画处理 。 在下面的示例中，我们将看到使用“ useRef ” Hook更新元素样式的功能。

import React, { useRef } from "react";
import "./styles.css";


export default function App() {
  const elementRef = useRef();


  function updateColor() {
    elementRef.current.style.color = "red";
  }


  return (
    <div className="App">
      <h1 ref={elementRef}>Hello CodeSandbox</h1>
      <input type="button" onClick={updateColor} value="Update Color" />
    </div>
  );
}

In the above example we are creating an object “elementRef” using “useRef”. This Object is made to point to “h1” element using the keyword “ref” in JSX. On the click of the button, we are trying to access the DOM element and updating the style property of the “h1” element. In the following example, we are trying to access the style property to Header Element and updating the color of Header to red using the DOM references.

在上面的示例中，我们使用“ useRef ”创建了一个对象“ elementRef ”。 在JSX中使用关键字“ ref ”使该对象指向“ h1 ”元素。 单击该按钮，我们尝试访问DOM元素并更新“ h1 ”元素的style属性。 在下面的示例中，我们尝试将style属性访问Header Element，并使用DOM引用将Header的颜色更新为红色。

演示地址

最后说明 (Final Note)

Use “useRef” Hook to access DOM element of an Element and update without triggering the entire Re-Render cycle of React Component.

使用“ useRef”挂钩访问Element的DOM元素并进行更新，而不会触发React Component的整个重新渲染周期。

For More Details, refer the following link:

有关更多详细信息，请参考以下链接：

翻译自: https://medium.com/technofunnel/react-uncontrolled-elements-with-useref-hooks-9c5873476c6f

react useref