Javascript 如何在反应组件中添加滚动事件

How to add scroll event in react component

提问by Lord Salforis

I'm trying to add an onScrollevent on a table. This is what I've tried:

我正在尝试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>
    )
}

I tried console.log(ReactDOM.findDOMNode(this.refs.table))and I'm getting the correct result but scroll event is never fired at all. I looked in herebut still failed. Any help would be so much appreciated.

我试过了console.log(ReactDOM.findDOMNode(this.refs.table))，我得到了正确的结果，但根本不会触发滚动事件。我在这里查看，但仍然失败。任何帮助将不胜感激。

采纳答案by Harkirat Saluja

You need to bind this to the element in context.

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

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

回答by Anton Kulakov

You can use onScrollattribute:

您可以使用onScroll属性：

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

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

Here is an example: https://jsfiddle.net/81Lujabv/

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

回答by tlagreca

I was looking to do something similar. Adding the event listener to the window instead of the ReactDom.findDOMNode worked for me...

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

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

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

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

回答by Shivansh Jagga

I had been finding a good solution to this problem. The following piece of code is working, where the listener is just on the particular class/div: React version is 16.0.0

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

First importReactDOM, import ReactDOM from "react-dom";

首先导入ReactDOM，import ReactDOM from "react-dom";

Thenin the class xyz extends Componentsection

然后在该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
    });
  }

After pastingthe above functions, in the render()method , whatever you want to name the refmethod, you can do so, make surethe same name goes in the findDOMNodeas well , i.e, findDOMNode(this.refs.category_scroll):

粘贴上面的函数后，在render()方法中，不管你想给方法起什么名字ref，都可以，请确保方法中也有相同的名字findDOMNode，即findDOMNode(this.refs.category_scroll)：

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

---

---

.

.

.

.

If it's a horizontall scroll, then event.currentTarget.scrollTopworks in the listenScrollEvent() function.

如果是水平滚动，则event.currentTarget.scrollTop在 listenScrollEvent() 函数中起作用。

回答by kidkkr

according to React documents(https://reactjs.org/docs/handling-events.html),

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

React events are named using camelCase, rather than lowercase. You can set attributes as you do with pure HTML.

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

HTML:

HTML：

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

JSX:

JSX：

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

you should create a wrapper block element which has fixed height to enable scroll.

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

回答by MCSLI

Give this a try, added .bind(this)to this.listenScrollEventwhen you pass it to the addEventListener.

试试这个，添加.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>
        )
    }