如何在React组件中添加滚动事件

Question

我正在尝试在桌子上添加

onScroll

事件。这是我尝试过的：

componentDidMount() {
    ReactDOM.findDOMNode(this.refs.table).addEventListener('scroll', this.listenScrollEvent);
}

componentWillUnmount() {
    ReactDOM.findDOMNode(this.refs.table).removeEventListener('scroll', this.listenScrollEvent);
}

listenScrollEvent() {
    console.log('Scroll event detected!');
}

render() {
    return (
        <table ref="table">
           [...]
        </table>
    )
}

我尝试了

console.log(ReactDOM.findDOMNode(this.refs.table))

，我得到了正确的结果，但滚动事件根本没有被触发。我查看了here但仍然失败。任何帮助将不胜感激。

Answer 1

您需要将其绑定到上下文中的元素。

render() {
    return (
        <table ref="table" onScroll={this.listenScrollEvent.bind(this)}>
           [...]
        </table>
    )
}

Answer 2

您可以使用

onScroll

属性：

listenScrollEvent() {
    console.log('Scroll event detected!');
}

render() {
    return (
        <table onScroll={this.listenScrollEvent}>
           [...]
        </table>
    )
}

这是一个示例：https://jsfiddle.net/81Lujabv/

Answer 3

我想做类似的事情。将事件侦听器添加到窗口而不是 ReactDom.findDOMNode 对我有用......

componentDidMount() {
    window.addEventListener('scroll', this.handleScrollToElement);
}

componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScrollToElement);
}

handleScrollToElement(event) {
    console.log('Fired ' + event)
}

Answer 4

根据React文档（https://reactjs.org/docs/handling-events.html），

React 事件使用驼峰式命名，而不是小写。 您可以像使用纯 HTML 一样设置属性。

HTML：

<div onclick="..." onscroll="...">
  ...
</div>

JSX：

<div onClick={...} onScroll={...}>
  ...
</div>

您应该创建一个具有固定高度的包装块元素以启用滚动。

Answer 5

我一直在寻找解决这个问题的好方法。以下代码正在运行，其中 侦听器仅在特定的类/div 上 ： React版本是16.0.0

首先导入ReactDOM，

import ReactDOM from "react-dom";

然后在

class xyz extends Component

部分

  constructor(props) {
    super();
    this.state = {
        vPos : 0
    }
    this.listenScrollEvent = this.listenScrollEvent.bind(this);
  }

  componentDidMount() {
    ReactDOM.findDOMNode(this.refs.category_scroll).addEventListener('scroll', this.listenScrollEvent);
  }

  componentWillUnmount() {
      ReactDOM.findDOMNode(this.refs.category_scroll).removeEventListener('scroll', this.listenScrollEvent);
  }

  listenScrollEvent(event) {
    console.log('firee');
    this.setState({
        vPos: event.target.body.scrollTop
    });
  }

粘贴以上函数后，在

render()

方法中，无论你想给

ref

方法命名什么，都可以这样做，确保同样的名称也出现在

findDOMNode

中，即：

findDOMNode(this.refs.category_scroll)

：

<div onScroll={this.listenScrollEvent} ref="category_scroll">
...
</div>

---

.

.

如果是水平滚动，则

event.currentTarget.scrollTop

在listenScrollEvent()函数中工作。

Answer 6

如果您仍然无法检测到表格中的滚动事件，请尝试将偶数侦听器附加到父组件，因为它可能会限制表格的高度/宽度。

来自：

<div className="max-h-[75vh]">
        <table onScroll={listenScrollEvent}>

致：

<div className="max-h-[75vh]" onScroll={listenScrollEvent}>
        <table>

注意：

max-h-[75vh]

是Tailwind风格。

Answer 7

尝试一下，当您将其传递给

.bind(this)

时，将

this.listenScrollEvent

添加到

addEventListener

。

   componentDidMount() {
        ReactDOM.findDOMNode(this.refs.table).addEventListener('scroll', this.listenScrollEvent.bind(this));
    }

    componentWillUnmount() {
        ReactDOM.findDOMNode(this.refs.table).removeEventListener('scroll', this.listenScrollEvent.bind(this));
    }

    listenScrollEvent() {
        console.log('Scroll event detected!');
    }

    render() {
        return (
            <table ref="table">
               [...]
            </table>
        )
    }