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

IT技术 javascript reactjs ecmascript-6
2021-04-12 20:30:26

我正在尝试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))，我得到了正确的结果，但根本不会触发滚动事件。我在这里查看，但仍然失败。任何帮助将不胜感激。

6个回答

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

render() {
    return (
        <table ref="table" onScroll={this.listenScrollEvent.bind(this)}>
           [...]
        </table>
    )
}
嗯，出于某种原因，这实际上对我有帮助。简单明了
2021-05-31 20:30:26
如果您使用 ES6 Class 创建组件。
2021-06-03 20:30:26
我已经在构造函数中做了，但仍然不起作用。 constructor(props) {super(props); this.listenScrollEvent = this.listenScrollEvent.bind(this);}
2021-06-15 20:30:26
虽然这通常很有用，但请注意，listenScrollEvent原始问题中的方法没有做任何事情，this因此绑定实际上是不必要的。
2021-06-20 20:30:26

您可以使用onScroll属性：

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

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

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

我认为onScroll在反应中未启用在元素上放置事件？o_0
2021-06-01 20:30:26
我尝试将其更改为onClick并且它有效......现在回到问题onScroll
2021-06-12 20:30:26

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

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

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

handleScrollToElement(event) {
    console.log('Fired ' + event)
}
一个窗口上可以有 1 个以上的滚动组件，所以不是很好。
2021-05-31 20:30:26
我怀疑这是正确的答案，即使提问者说他​​不想window...在评论中使用。然而，在评论中他也没有回答表格内容是否溢出的第一个问题。我怀疑答案真的是“不”，因为没有其他答案适合他。他没有告诉我们太多关于他的最终目标，所以我只能猜测他会选择一个固定/绝对的表格，除了window. 一开始我也遇到了类似的问题，直到我得到提示，滚动只会在溢出的对象上触发，所以我查了一下，是的，就是这样。
2021-06-21 20:30:26

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

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

HTML：

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

JSX：

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

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

我一直在寻找解决这个问题的好方法。以下代码正在运行，其中侦听器仅位于特定的 class/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() 函数中起作用。

其它你可能感兴趣的问题
上一篇如何在 Jest 中为我的测试添加 <canvas> 支持？ 下一篇input 的 event.target 在 this.setState [React.js] 中为 null