類組件中使用ref

在類組件中，你可以使用createRef來創(chuàng)建一個(gè)ref，并將它附加到DOM元素或類組件實(shí)例上。使用ref允許你在類組件中訪問和操作特定的DOM元素或類組件實(shí)例。

下面是在類組件中使用ref的步驟：

1. 引入React和createRef：
   在類組件文件的頂部，你需要從React中導(dǎo)入React和createRef。

import React, { Component, createRef } from 'react';

2. 創(chuàng)建ref：
   使用createRef來創(chuàng)建一個(gè)ref對象。

class MyClassComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = createRef();
  }

  // ...
}

在上面的例子中，我們在類組件MyClassComponent的構(gòu)造函數(shù)中創(chuàng)建了一個(gè)ref（myRef）。

3. 綁定ref到DOM元素或類組件實(shí)例：
   將創(chuàng)建的ref（myRef）綁定到你想要引用的DOM元素或類組件實(shí)例上。在類組件中，你可以使用ref屬性來實(shí)現(xiàn)這一點(diǎn)。

class MyClassComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = createRef();
  }

  render() {
    return <input ref={this.myRef} />;
  }
}

在上面的例子中，我們將ref（myRef）綁定到了一個(gè)input元素上。

4. 在類組件中使用ref：
   現(xiàn)在，你可以在類組件的其他方法中通過this.myRef.current來訪問和操作引用的DOM元素或類組件實(shí)例。

class MyClassComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = createRef();
  }

  handleButtonClick = () => {
    if (this.myRef.current) {
      this.myRef.current.focus();
    }
  };

  render() {
    return (
      <div>
        <input ref={this.myRef} />
        <button onClick={this.handleButtonClick}>Focus Input</button>
      </div>
    );
  }
}

在上面的例子中，我們創(chuàng)建了一個(gè)按鈕點(diǎn)擊事件handleButtonClick，當(dāng)按鈕被點(diǎn)擊時(shí)，會調(diào)用this.myRef.current.focus()來將焦點(diǎn)設(shè)置到input元素上。

通過這種方式，你可以在類組件中使用ref來引用和操作特定的DOM元素或類組件實(shí)例。

hooks組件中使用ref

在 React Hooks 組件中，你可以使用useRef來創(chuàng)建并使用 ref。useRef是一個(gè) Hooks 函數(shù)，它允許你在函數(shù)組件中保持可變的數(shù)據(jù)，類似于在類組件中使用實(shí)例屬性。ref 在許多情況下很有用，例如訪問 DOM 元素、存儲任意值等。

使用useRef的步驟如下：

1. 引入useRef：
   在組件文件中，首先需要從 React 中導(dǎo)入useRef：

import React, { useRef } from 'react';

2. 創(chuàng)建 ref：
   使用useRef來創(chuàng)建一個(gè) ref 對象：

const myRef = useRef(initialValue);

其中，initialValue是 ref 的初始值。

3. 將 ref 綁定到 DOM 元素：
   將myRef綁定到你想要引用的 DOM 元素上。這通常通過在 JSX 中的ref屬性中傳遞myRef來實(shí)現(xiàn)：

<input ref={myRef} />

4. 在組件中使用 ref：
   你可以在組件中通過myRef.current來訪問 ref 的當(dāng)前值。這是一個(gè)可變的對象，可以用于存儲和讀取任何數(shù)據(jù)。

const MyComponent = () => {
  const inputRef = useRef(null);

  const handleButtonClick = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleButtonClick}>Focus Input</button>
    </div>
  );
};

在上面的例子中，我們創(chuàng)建了一個(gè) input 元素的 ref，并在按鈕點(diǎn)擊事件中使用inputRef.current.focus()來將焦點(diǎn)設(shè)置到 input 元素上。

需要注意的是，useRef返回的myRef.current屬性在組件的整個(gè)生命周期中保持不變，但是其內(nèi)部的值可以在不重新渲染組件的情況下發(fā)生變化。這使得useRef適用于存儲在組件渲染期間需要跨渲染保持不變的數(shù)據(jù)。

自定義組件ref

當(dāng)你在React中創(chuàng)建自定義組件時(shí)，如果想在父組件中使用ref引用子組件，你需要使用forwardRef方法。forwardRef允許你將ref從父組件傳遞到子組件中。

下面是使用forwardRef的步驟：

1. 在子組件中使用forwardRef方法：
   在子組件中使用forwardRef方法來傳遞ref，并將它與子組件的DOM元素或其他需要引用的元素綁定起來。同時(shí)，確保在組件定義中的第二個(gè)參數(shù)（通常稱為ref）中接收傳遞的ref。

import React, { forwardRef } from 'react';

const CustomChildComponent = forwardRef((props, ref) => {
  return <input ref={ref} />;
});

在上面的例子中，我們創(chuàng)建了一個(gè)名為CustomChildComponent的自定義子組件，并在其中使用forwardRef來傳遞ref參數(shù)，并將它綁定到了input元素上。

2. 在父組件中使用ref：
   現(xiàn)在，你可以在父組件中使用CustomChildComponent并將一個(gè)ref傳遞給它。這樣，父組件就可以引用子組件內(nèi)部的input元素。

import React, { useRef } from 'react';
import CustomChildComponent from './CustomChildComponent';

const ParentComponent = () => {
  const inputRef = useRef(null);

  const handleButtonClick = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <CustomChildComponent ref={inputRef} />
      <button onClick={handleButtonClick}>Focus Input</button>
    </div>
  );
};

在上面的例子中，我們在父組件中創(chuàng)建了一個(gè)ref（inputRef），并將它傳遞給CustomChildComponent作為ref屬性。現(xiàn)在，我們可以在handleButtonClick函數(shù)中使用inputRef.current.focus()來將焦點(diǎn)設(shè)置到子組件中的input元素上。

通過這樣的方法，你就可以在自定義組件中使用ref，并從父組件中控制子組件內(nèi)部的DOM元素或組件實(shí)例。

自定義Hooks組件想向外暴露一些方法

如果你希望自定義組件使用ref時(shí)向外暴露一些方法，可以通過在子組件內(nèi)部創(chuàng)建一個(gè)ref，并將它與需要暴露的方法關(guān)聯(lián)。然后，將這個(gè)ref作為一個(gè)對象，包含暴露的方法，傳遞給父組件。這樣，父組件就可以通過ref調(diào)用子組件暴露的方法。

下面是一個(gè)示例：

1. 子組件中創(chuàng)建ref和暴露方法：

import React, { forwardRef, useRef, useImperativeHandle } from 'react';

const CustomChildComponent = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  // 暴露給父組件的方法
  const focusInput = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  // 使用 useImperativeHandle 將方法暴露給父組件
  useImperativeHandle(ref, () => ({
    focusInput: focusInput
  }));

  return <input ref={inputRef} />;
});

在上面的例子中，我們創(chuàng)建了一個(gè)ref（inputRef）來引用input元素，并定義了一個(gè)focusInput方法用于將焦點(diǎn)設(shè)置到input元素上。然后，我們使用useImperativeHandle將focusInput方法暴露給父組件。

2. 在父組件中使用子組件的暴露方法：

import React, { useRef } from 'react';
import CustomChildComponent from './CustomChildComponent';

const ParentComponent = () => {
  const childComponentRef = useRef(null);

  const handleButtonClick = () => {
    if (childComponentRef.current) {
      childComponentRef.current.focusInput();
    }
  };

  return (
    <div>
      <CustomChildComponent ref={childComponentRef} />
      <button onClick={handleButtonClick}>Focus Input</button>
    </div>
  );
};

在上面的例子中，我們在父組件中創(chuàng)建了一個(gè)ref（childComponentRef），并將其傳遞給CustomChildComponent。在父組件中的handleButtonClick函數(shù)中，我們可以通過childComponentRef.current.focusInput()調(diào)用子組件中暴露的focusInput方法，將焦點(diǎn)設(shè)置到子組件的input元素上。

通過這種方式，你可以在自定義組件中使用ref，并將一些方法暴露給父組件，使父組件可以調(diào)用子組件的特定功能。文章來源地址http://www.zghlxwxcb.cn/news/detail-622982.html

到了這里，關(guān)于react Ref 的基本使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！