在反应中访问 'scrollLeft' 属性

Question

当我将我的代码从基本 HTML 和 JS 转换为 React

时，我遇到了 div 属性属性的问题

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

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

现在，当开始将此项目转换为 React 时，它无法更改 scrollLeft 的值属性

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

在反应中访问 'scrollLeft' 属性

Access 'scrollLeft' property in react

javascript

dom

scroll

drag

reactjs