如何在 ReactJS 中创建 refs?


在 ReactJS 中,refs 用于引用文档的任何节点。通常,我们可以将 props 传递给子元素,以从父级的状态与子元素进行交互。但是,有时子组件会超出组件的典型数据流。例如,我们有四个组件,数据流是第二个是第一个的子级,第三个是第二个的子级,第四个是第三个组件的子级。要从第一个组件与第四个组件交互,从每个组件传递 props 不是一个好方法。因此,我们可以使用 refs 直接从第一个组件与第四个组件进行交互。

在本教程中,我们将学习两种使用 refs 引用 DOM 元素的方法。

通过 React.createRef() 和 useRef() 钩子创建 refs

在 ReactJs 中,创建 refs 的第一种方法是使用 React.CreateRef() 用于类组件和 useRef() 钩子用于函数组件。在组件中创建 ref 变量后,我们可以将其分配为任何 HTML 元素的 ref 属性的值。因此,它可以包含元素的引用。

语法

用户可以按照以下语法使用 React.Createref() 在类组件中创建 ref。

this.InputElement = React.createRef();
<input type = "text" ref = {this.InputElement} id = "text" />

在上面的语法中,我们创建了 InputElement ref 并将其分配给 input。

用户可以按照以下语法使用 useRef() 钩子在函数组件中创建 ref。

const input = useRef(null);
<input type = "text" ref = {input} /> 

在上面的语法中,我们使用 useRef() 创建了 input ref 并引用了文本输入。

示例

在下面的示例中,我们创建了包含文本输入的类组件。在类组件的构造函数中,我们创建了 InputElement ref 和状态对象。

之后,当用户点击按钮时,它将执行 getInputValue() 方法,该方法使用 refs 获取输入的值。

import React from "react";
class App extends React.Component {
   constructor(props) {
      super(props);
      
      //creating refs to access input elements
      this.InputElement = React.createRef();
      this.getInputValue = this.getInputValue.bind(this);
      this.state = {
         text: "",
      };
   }
   
   // method to get texts from the input
      getInputValue(e) {
         e.preventDefault();
         this.setState({ text: this.InputElement.current.value });
      }
      render() {
         return (
            <div>
               {/* use the ref attribute */}
               <h2> Using the refs with class components </h2>
               <p>Enter some text below:</p>
               <input type = "text" ref = {this.InputElement} id = "text" /> 
               <br></br>
               <div> The submitted value is {this.state.text}. </div>
               <button onClick = {this.getInputValue}> Click here </button>
            </div>
         );
      }
}
export default App;

输出

示例

在下面的示例中,我们使用 refs 与函数组件一起使用。在这里,我们使用 userRef() 钩子创建了一个 input ref。之后,我们将 ref 属性与 HTML input 一起使用,并将 input ref 引用到它。

接下来,我们使用 ref 获取输入的值,就像在第一个示例中一样。

import { useState } from "react";
import { useRef } from "react";
export default function App() {
   const input = useRef(null);
   const [value, setValue] = useState(""); 
   function handleClick() {
      let value = input.current.value;
      setValue(value);
   }
   return (
      <div>
         <h2>
            {" "}
            Using the refs with functional components
         </h2>
         <input type = "text" ref = {input} />
         <br></br>
         <div> The value you have entered in the text input is {value}.</div>
         <input type = "button" value = "Submit Text" onClick = {handleClick} />
      </div>
   );
} 

输出

通过回调函数创建 refs

作为开发人员,如果希望在创建 refs 时编写更易读和清晰的代码,则应使用回调 refs。“refs”属性的元素采用回调函数作为值,而不是 ref 变量。之后,我们可以获取元素作为回调函数的第一个参数,并且可以使用它将焦点设置到元素上或执行其他操作。

语法

用户可以按照以下语法通过回调函数创建 refs。

input type = "text" ref = {(ele) => {
   this.input = ele;
};
} /> 

在上面的语法中,input 是在组件中声明的变量,而 ele 指的是输入元素本身。

示例

在下面的示例中,我们可以使用回调函数创建 refs。首先,我们在构造函数中创建了 input 变量并将其初始化为 null 值。之后,我们将 setRef 回调函数作为输入元素的 refs 属性的值传递。

“refs”属性调用 setRef() 函数,该函数将输入元素的引用存储到 input 变量中,并且我们在 getTextInput() 方法中访问 input 变量的值。

import React from "react";
class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         text: "",
      };
      this.input = null;
      this.setRef = (ele) => {
         this.input = ele;
      };
      this.getTextValue = () => {
         this.setState({ text: this.input.value });
      };
   }
   render() {
      return (
         <div>
            {/* use the ref attribute */}
            <h2> Using the callback refs in ReactJS </h2>
            <input type = "text" ref = {this.setRef} id = "text" />
            <br></br>
            <div> The submitted value is {this.state.text}. </div>
            <button onClick = {this.getTextValue}> Click here </button>
         </div>
      );
   }
}
export default App; 

输出

使用 refs 与子组件交互

引入 refs 是为了从子组件与父组件进行交互。在这里,我们将分别在子组件和父组件中创建 ref,并通过父组件与子组件的元素进行交互。

语法

用户可以按照以下语法使用 refs 从父组件与子组件进行交互。

// access refs of the child component

this.childClassRef.current.testRef.current.focus();
return <Child ref={this.childClassRef} />; 

在上面的语法中,我们将 ref 传递给子组件并访问了子组件的 ref。

示例

文件名 - App.js

在 App.js 文件中,我们导入了子组件并将 ref 作为 prop 传递。childClassRef 指的是子组件。此外,用户还可以看到我们在 componentDidMount() 方法中如何访问子组件的 ref。

testRef ref 在子组件中声明,并且通过这种方式,我们可以从父组件访问子组件的 ref。

import React from "react";
import Child from "./Child";
class App extends React.Component {
   constructor(props) {
      super(props);
      this.childClassRef = React.createRef();
   }
   componentDidMount() {
      this.childClassRef.current.testRef.current.focus();
   } 
   render() {
      return <Child ref = {this.childClassRef} />;
   }
}
export default App;

文件名 - Child.js

在 Child.js 文件中,我们使用 React.createRef() 创建了 testRef ref 并引用了 input 元素。

import React from "react";
import { Component } from "react";
class Child extends Component {
   constructor(props) {
      super(props);
      this.testRef = React.createRef();
   }
   render() {
      return (
         <div>
            <h3> This is a child component. </h3>
            <input type = "text" ref = {this.testRef} />
         </div>
      );
   }
}
export default Child;

输出

在上面的输出中,用户可以观察到,每当我们刷新页面时,应用程序都会从父组件聚焦到子组件的输入元素上。

更新于: 2023 年 2 月 28 日

381 次浏览

启动你的 职业生涯

通过完成课程获得认证

开始
广告