Использование атрибута ref с кнопками в React: методы и примеры

Фраза «реакция на кнопку ref», по-видимому, связана с веб-разработкой с использованием платформы React. В React атрибут refиспользуется для получения ссылки на элемент DOM. Он позволяет вам напрямую получать доступ к базовому узлу DOM и манипулировать им.

Вот несколько методов, связанных с использованием атрибута refс кнопками в React:

  1. Создать объект ссылки:

    import React, { useRef } from 'react';
    function MyComponent() {
    const buttonRef = useRef(null);
    const handleClick = () => {
    // Access the button DOM node
    console.log(buttonRef.current);
    };
    return (
    <button ref={buttonRef} onClick={handleClick}>
      Click me
    </button>
    );
    }
  2. Доступ к ссылке на кнопку в компонентах класса:

    import React from 'react';
    class MyComponent extends React.Component {
    constructor() {
    super();
    this.buttonRef = React.createRef();
    }
    handleClick() {
    // Access the button DOM node
    console.log(this.buttonRef.current);
    }
    render() {
    return (
      <button ref={this.buttonRef} onClick={this.handleClick}>
        Click me
      </button>
    );
    }
    }
  3. Используйте подход с переадресацией ссылок (для функциональных компонентов):

    import React, { useRef, forwardRef } from 'react';
    const MyButton = forwardRef((props, ref) => (
    <button ref={ref} onClick={props.onClick}>
    {props.children}
    </button>
    ));
    function MyComponent() {
    const buttonRef = useRef(null);
    const handleClick = () => {
    // Access the button DOM node
    console.log(buttonRef.current);
    };
    return (
    <MyButton ref={buttonRef} onClick={handleClick}>
      Click me
    </MyButton>
    );
    }

Это всего лишь несколько примеров того, как вы можете использовать атрибут refс кнопками в React.