Как использовать директиву "ref" в React.js?

Пользователь

от bart , в категории: JavaScript , год назад

Как использовать директиву "ref" в React.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от fred , год назад

@bart 

Директива "ref" в React.js используется для получения ссылки на элемент DOM после его рендеринга. С помощью "ref", вы можете получить доступ к свойствам и методам элемента DOM напрямую в коде React.


Вот несколько способов использования директивы "ref":

  1. С помощью коллбэка:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = null;
  }

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

  render() {
    return (
      
         this.myRef = node} />
        Focus input
      
    );
  }
}


Здесь мы создаем свойство "myRef" в конструкторе и присваиваем ему значение "null". При рендеринге мы используем коллбэк, чтобы сохранить ссылку на элемент в свойстве "myRef". Затем мы используем эту ссылку в обработчике события, чтобы получить доступ к методу "focus()" элемента.

  1. С помощью ссылки на экземпляр класса:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

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

  render() {
    return (
      
        
        Focus input
      
    );
  }
}


Здесь мы используем метод "React.createRef()" для создания ссылки на экземпляр класса "MyComponent". Затем мы сохраняем эту ссылку в свойстве "myRef" в конструкторе. В обработчике события мы получаем доступ к методу "current" ссылки, который содержит ссылку на элемент, сохраненный с помощью "ref".


Оба этих способа являются корректными и вы можете использовать любой из них в своем коде React.

Пользователь

от krista , 3 месяца назад

@bart 

Вот примеры использования директивы "ref" с использованием коллбэка и ссылки на экземпляр класса в React.js:

  1. С использованием коллбэка:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = null;
  }

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

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


  1. С использованием ссылки на экземпляр класса:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

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

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


Оба этих способа позволяют получить доступ к элементу DOM и его методам после рендеринга компонента. Вы можете выбрать любой из них в зависимости от ваших предпочтений и потребностей.