ReactJS 如何创建引用

在ReactJS中，Refs被用来引用文档中的任何节点。一般来说，我们可以将props传递给子元素，以便从父元素的状态中与子元素互动。不过，有时子组件还是不在组件的典型数据流中。例如，我们有四个组件，而数据流是第二个是第一个的孩子，第三个是第二个的孩子，第四个是第三个组件的孩子。要从第一个组件与第四个组件进行交互，从每个组件传递props并不是好的做法。因此，我们可以使用refs来直接与第一个组件的第四个组件交互。

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

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

在ReactJs中，创建 refs 的第一种方式是对类组件使用React.CreateRef()，对函数组件使用useRef()钩子。在组件中创建Ref变量后，我们可以把它作为任何HTML元素的Ref属性的值来分配。因此，它可以包含该元素的引用。

语法

用户可以按照下面的语法来使用React.Createref()在类组件中创建一个引用。

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

在上面的语法中，我们已经创建了InputElement ref，并将其分配给输入。

用户可以按照下面的语法，使用useRef()钩子在功能组件中创建ref。

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

在上面的语法中，我们使用useRef()创建了输入参考，并提到了文本输入。

例子

在下面的例子中，我们已经创建了一个包含文本输入的类组件。在该类组件的构造函数中，我们创建了InputElement ref和state对象。

之后，当用户点击按钮时，就会执行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;

输出

如何在ReactJS中创建引用？

例子

在下面的例子中，我们使用了带有功能组件的 refs。在这里，我们使用了 userRef() 钩子来创建一个输入 ref。之后，我们在HTML输入中使用了ref属性，并将输入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>
   );
}

输出

如何在ReactJS中创建引用？

通过回调函数创建 refs

作为一个开发者，如果你想在创建 refs 时写出更可读、更清晰的代码，你应该使用回调 refs。元素的’refs’属性将回调函数作为一个值而不是一个ref变量。之后，我们可以获得元素作为回调函数的第一个参数，我们可以用它来设置元素的焦点或执行其他操作。

语法

用户可以按照下面的语法来通过回调函数创建引用。

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

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

例子

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

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

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;

输出

如何在ReactJS中创建引用？

使用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作为一个道具传递。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，并引用到输入元素。

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;