Как получить данные из блока div на react.js?

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

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

Как получить данные из блока div на react.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от olen.shanahan , 2 года назад

@nikko 

Для получения данных из блока div на React.js, вы можете использовать методы, доступные в стандартном DOM API, такие как getElementById(), getElementsByClassName(), getElementsByTagName() и т. д.


Однако на React.js обычно используется другой подход к получению данных из элементов DOM. Обычно данные, отображаемые в элементах DOM, хранятся в состоянии компонента или передаются в компоненты через свойства (props). После этого компонент может использовать эти данные для отображения информации на странице.


Например, если вы хотите получить текст из блока div с определенным id, можно использовать ref для получения ссылки на элемент и затем обращаться к свойству textContent для получения текста. Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import React, { useRef } from "react";

function MyComponent() {
  const divRef = useRef(null);

  function handleClick() {
    const divText = divRef.current.textContent;
    console.log(divText);
  }

  return (
    <div id="myDiv" ref={divRef}>
      Это текст, который вы хотите получить
      <button onClick={handleClick}>Получить текст</button>
    </div>
  );
}


В этом примере мы создаем ссылку на элемент div с id="myDiv" с помощью useRef(). Затем мы создаем функцию handleClick(), которая получает текст из ссылки на элемент div и выводит его в консоль при клике на кнопку. Наконец, мы возвращаем div и кнопку в компоненте и добавляем обработчик клика к кнопке.

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

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

@nikko 

При клике на кнопку будет получен текст из блока div и выведен в консоль. Данный подход позволяет получить текст или другие данные из любого элемента DOM, а не только из блока div.