Доступ к свойству scrollLeft в React - PullRequest
Новая
       29

Доступ к свойству scrollLeft в React

0 голосов
/ 29 мая 2020

У меня проблема с атрибутами свойства div, когда я конвертирую свой код из basi c HTML и JS, чтобы реагировать

на старый код, и желаемый результат будет таким:

https://codepen.io/fadeomar/project/editor/DVWGjd

теперь, когда начинаешь преобразовывать этот проект, чтобы реагировать, он не может изменить значение свойства scrollLeft

мой вопрос в том, как я могу изменить значение scrollLeft для определенного элемента в реакции, все, что я получил, когда искал эту проблему, которая устанавливает прослушиватель событий для всего оконного объекта, а не для определенного c элемента в DOM

Я думал чтобы использовать повторно используемый компонент для перетаскивания и прокрутки, и вот код 

import React from 'react';
import PropTypes from 'prop-types';

export class ScrollDrag extends React.Component {
  constructor(props) {
    super(props);
    this.ref = React.createRef();
    this.state = {
      isScrolling: false,
      clientX: 0,
      scrollX: 0,
    };
  }

  onMouseDown = e => {
    this.setState({ ...this.state, isScrolling: true, 
     clientX: e.clientX });
  };

  onMouseUp = () => {
    this.setState({ ...this.state, isScrolling: false });
  };

  onMouseMove = e => {
    const { clientX, scrollX } = this.state;
    if (this.state.isScrolling) {
      this.ref.current.scrollLeft = scrollX + e.clientX - clientX;
      this.setState({scrollX: scrollX + e.clientX - clientX, clientX: e.clientX})
    }
  };

  render() {
    const { rootClass } = this.props;
    return (
      <div
        ref={this.ref}
        onMouseDown={this.onMouseDown}
        onMouseUp={this.onMouseUp}
        onMouseMove={this.onMouseMove}
        className={rootClass}
      >
        {React.Children.map(this.props.children, child =>
            React.Children.only(child))}
      </div>
    );
  }
}

ScrollDrag.defaultProps = {
  ref: { current: {} },
  rootClass: '',
};

ScrollDrag.propTypes = {
  ref: PropTypes.object,
  rootClass: PropTypes.string,
  children: PropTypes.string,
};

export default ScrollDrag;

, тогда я использую его как компонент наследственного порядка в приложении

это моя попытка: https://codesandbox.io/s/peaceful-butterfly-ndp6z?file

Любая помощь в выполнении этих работ приветствуется

1 Ответ

0 голосов
/ 29 мая 2020

Обновленный ответ

Вы прокручивали не тот элемент. Я удалил обертки с предметов и настроил css. Еще мне пришлось поменять полярность прокрутки. Теперь это работает.

https://codesandbox.io/s/awesome-tree-s8miv?file= / src / DragScroll. js

Оригинальный ответ на исходный (теперь отредактированный) вопрос

Ошибка вызвана тем, что вы не используете ref, созданный в этом компоненте: 

render() {
    const { ref, rootClass } = this.props; // <-- this is wrong
    return (
      <div
        ref={ref}
        onMouseDown={this.onMouseDown}
        onMouseUp={this.onMouseUp}
        onMouseMove={this.onMouseMove}
        className={rootClass}
      >
        {React.Children.map(this.props.children, child =>
            React.Children.only(child))}
      </div>
    );

Это должно быть примерно так: 

render() {
    const { rootClass } = this.props;
    return (
      <div
        ref={this.ref}
        onMouseDown={this.onMouseDown}
        onMouseUp={this.onMouseUp}
        onMouseMove={this.onMouseMove}
        className={rootClass}
      >
        {React.Children.map(this.props.children, child =>
            React.Children.only(child))}
      </div>
    );
...