Question

我有一个父组件，它最初没有高度，但会在添加子项时增长。我可以在添加子项后上下滚动，但我注意到handleScroll函数没有被触发。

有人有过类似的问题吗？

#save

Answer 1

您可以通过以下方式将滚动功能绑定到div：

import ReactDOM from 'react-dom';
// ...

constructor() {
  super();
  this.handleScroll = this.handleScroll.bind(this);
}
componentDidMount() {
    const div = ReactDOM.findDOMNode(this.refs.someRef)
    div.addEventListener('scroll', this.handleScroll);
}
componentWillUnmount() {
    const div = ReactDOM.findDOMNode(this.refs.someRef)
    div.removeEventListener('scroll', this.handleScroll);
}
handleScroll(e) {
  console.log(e);
}
render() {
  return (
    <div ref="someRef" className="parent">
    {
      this.props.children.map((child)=>{
        <div>{child.name}</div>
      })
    }
    </div>
  )
}

..还请将你的div的CSS设置为：

.parent{
  overflow-y: auto;
}

React onScroll不从父组件触发

1 个答案: