如何在 ReactJS 中创建引用？

在 ReactJS 中创建 refs 非常简单。 Refs 通常用于以下目的：

• 管理焦点、文本选择或媒体播放。
• 触发命令式动画。
• 与第三方 DOM 库集成。

注意：您应该避免将 refs 用于可以以声明方式完成的任何事情。

以下示例仅基于功能组件，但您也可以自由使用类组件。

方法 1 ：使用React.createRef() 。它是在React 16.3 中引入的。

• 使用 React.createRef() 创建一个 ref 变量
• 使用元素的ref属性附加 ref 变量

文件名：App.js

Javascript

// Importing everything as React
import * as React from "react";
  
const App = () => {
  // Creating textInputRef variable
  const textInputRef = React.createRef();
  
  // This method will be used to focus textInput
  const textInputFocusHandler = () => {
    // Focusing input element
    textInputRef.current.focus();
  };
  
  return (
    

        
      {/** Attaching ref variable using element's ref attribute */}
      
  
      {/** Attaching textInputFocusHandler method to button click */}
      
             Click me to focus input
      
    
  );
};
  
export default App;

方法 2 ：使用useRef()钩子。

• 使用 React.useRef() 创建一个 ref 变量
• 使用元素的 ref 属性附加 ref 变量
• 使用 useRef() 而不是 createRef() 的好处是，它可以方便地保留任何可变值，类似于在类中使用实例字段的方式。
• useRef() 也采用初始值。

文件名：App.js

Javascript

// Importing everything as React
import * as React from "react";
  
const App = () => {
  // Creating textInputRef variable with initialValue "null"
  const textInputRef = React.useRef(null);
  
  // This method will be used to focus textInput
  const textInputFocusHandler = () => {
    // Focusing input element
    textInputRef.current.focus();
  };
  
  return (
    

        
      {/** Attaching ref variable using element's ref attribute */}
      
  
      {/** Attaching textInputFocusHandler method to button click */}
      
              Click me to focus input
      
    
  );
};
  
export default App;

方法3 ：使用回调参考。此方法在React 16.3之前使用。因此，如果您使用的是 React < 16.3，请使用此方法。

使用这种方法创建 ref 与其他两种方法有点不同。我们传递一个函数，而不是传递使用createRef()或useRef()创建的 ref 属性。该函数接收 React 元素或 HTML DOM 元素作为参数，可以使用。

文件名：App.js

Javascript

// Importing everything as React
import * as React from "react";
  
const App = () => {
  // Creating and initializing textInputRef variable as null 
  let textInputRef = null;
  
  // Callback function that will set ref for input field
  // Note: It can be used to set ref for any element
  const setTextInputRef = (element) => {
      textInputRef = element;
  };
  
  // This method will be used to focus textInput
  const textInputFocusHandler = () => {
  
    // If textInputRef is not null
    // otherwise it will throw an error
    if (textInputRef) {
      
      // Focusing input element
      textInputRef.focus();
    }
  };
  
  return (
    

      {/** Using setTextInputRef function so that
       *   textInputRef can be set as ref for this input field
       * */}
      
  
      {/** Attaching textInputFocusHandler 
           method to button click */}
      
          Click me to focus input
      
    
  );
};
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：