在反应中访问'scrollLeft'属性

Question

当我将代码从基本 HTML 和 JS 转换为响应时，我遇到了 div 属性的问题

旧代码和期望的结果是这样的：

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

现在开始转换此项目以做出反应时，它无法更改 scrollLeft 属性的值

我的问题是如何在反应中更改某个元素的scrollLeft 的值，当我搜索这个问题时，我得到的只是将事件侦听器设置为整个窗口对象，而不是 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

感谢任何帮助完成这项工作

Answer 1

更新答案

您滚动了错误的元素。我从项目中删除了包装并调整了 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>
    );