Что эквивалентно document.getElementById () в React?

Опубликовано: 7 Августа, 2021

В React у нас есть концепция Refs, которая эквивалентна document.getElementById () в Javascript. Ссылки предоставляют способ доступа к узлам DOM или элементам React, созданным в методе рендеринга.

Создание ссылок

Ссылки создаются с помощью React.createRef () и прикрепляются к элементам React через атрибут ref.

 class App extends React.Component {
 конструктор (реквизит) {
   супер (реквизит);
   // создание реф
   this.myRef = React.createRef ();
 }
 оказывать() {
 // присваиваем ref
   возврат <div ref = {this.myRef} />;
 }
}

Доступ к ссылкам

Когда мы назначаем ссылку элементу в рендере, тогда мы можем получить доступ к элементу, используя текущий атрибут ссылки.

const node = this.myRef.current;

Создание приложения React:

Шаг 1. Создайте приложение React, используя следующую команду:

 npx создать-реагировать-приложение имя папки

Шаг 2: После создания папки проекта, т.е. имени папки, перейдите в нее с помощью следующей команды:

 cd имя папки

Структура проекта: это будет выглядеть следующим образом.

filepathe- src / App.js:

Javascript

 import React from 'react'
 
class App extends React.Component {
 
    constructor(props) {
        super (props);
        this .myRef = React.createRef();
      }
    onFocus() {
      this .myRef.current.value = "focus"
    }
   
    onBlur() {
      this .myRef.current.value = "blur"
    }
   
    render() {
      return (
        <div>
          <input
            ref= { this .myRef}
            onFocus={ this .onFocus.bind( this )}
            onBlur={ this .onBlur.bind( this )}
          />
        </div>
      );
    }
  }
 
  export App; default 

Выход:

Picked

Что эквивалентно document.getElementById () в React?

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ