Question

如果元素有溢出，我如何在React组件中捕获滚动/滚轮事件：隐藏？

这样的事情：

<Component onWheel={this.handleWheel.bind(this)}/>

Answer 1

因为我在类似的问题上运行，所以我找到了你的问题。我的问题是我的div不可滚动，我需要捕捉滚动事件或车轮移动。这就是我所做的：

   export default class MyComponent extends Component {
      constructor(){
        super();
      }

      handleScroll(e) {
        console.log('Scroll event is being called', e);
      }

      componentDidMount() {
          const holder = ReactDOM.findDOMNode(this.refs.holder)
          holder.addEventListener('mousewheel', this.handleScroll);
      }

      componentWillUnmount() {
          const holder = ReactDOM.findDOMNode(this.refs.holder)
          holder.removeEventListener('mousewheel', this.handleScroll);
      }

      render() {


        const hiddenRecipients = amountOfRecipients - children.length;


        return (
          <div className="my_holder" ref="holder" />)
}
}

所以基本上我只是添加了一个引用并将一个事件监听器附加到鼠标滚轮上。

希望有所帮助

Answer 2

const onWheel = e => {
    e.preventDefault()
    console.log(e.deltaY)
}

<Component onWheel={onWheel} />

这是处理（捕获）react中的车轮数据的另一种方式

React - 溢出时捕获轮事件：隐藏元素？

2 个答案: