Можно ли изменять dom в ReactJS с помощью чистого JS?

Добрый день. Пишу мелкое тестовое приложение drag and drop. Смотрел много инструкций, читал много статей и т.д.
Пришел к выводу, что это можно сделать самому. Сделал все сам, но с помощью голого JS. "Законно ли это?"
Практикуется ли такой метод в React ?
код прилагаю:

spoiler

class Test extends Component {
  //координаты X в данный момент
  state = {
    x: 0,
  }

//Отлавливаем клик
//Задаем позицию "absolute"
//Добавляем новый обработчик на перемещение
  onmousedown = (event) => {
    /*document.getElementById(*)*/
    event.target.style.position = 'absolute';
    document.addEventListener('mousemove', this.onmousemove);
  }

//Отлавливаем "отпускание"  клавиши и удаляем событие перемещения
  onmouseup = (event) => {
    document.removeEventListener('mousemove', this.onmousemove);
  }

//функция перемещения с "центрированием элемента", чтобы курсор мыши оказался по центру элемента (мяча) 
  onmousemove = (event) => {
    this.setState({x: event.clientX})
    let footboll = document.getElementById('footboll');
    let { top, left, right, bottom } = footboll.getBoundingClientRect();
    if(top == event.pageY - 30 || left == event.pageX - 30 || right == event.pageX + 30 || bottom == event.pageY + 30) {
      document.removeEventListener('mousemove', this.onmousemove);
    }

//Функция "реактивного" перемещения элемента по окну.
    this.onPosition(event.pageX, event.pageY);
    document.addEventListener('mouseup', (event) => this.onmouseup(event))
  }

  onPosition = (clientX, clientY) => {
    let element = document.getElementById('boll');
    let widths = element.getBoundingClientRect().width;
    let height = element.getBoundingClientRect().height;
    element.style.top = clientY - height /2 + 'px';
    element.style.left = clientX - widths /2 + 'px';
  }

  render() {
    return (
      <div className="test">
        <h3>Тестовый компонент...</h3>
        <button className="btn btn-primary">Кликни</button>
        <div id="footboll" className="footboll">
          <div>x:{this.state.x}</div>
          <div className="football-goal"
                id="football-goal"></div>
          <span id ="boll"
                className="boll"
                onMouseDown={(event) => this.onmousedown(event)}
                onDragStart={(event) => event.preventDefault()}></span>
        </div>
      </div>
    )
  }
}

export default Test;

  • Вопрос задан
  • 89 просмотров
Решения вопроса 1
GreyCrew
@GreyCrew
Full-stack developer
Да, конечно можно, это более чем реактовский компонент.
Тут единственное что - можно привязки через рефы делать, да класс поменять на компонент с хуками.
Но по факту будет тоже самое.

А по чистоте и оптимизации кода могут быть уже отдельные вопросы.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы