Question

美好的一天。

我有一个React组件。这是Navbar。

类Nav扩展了React.Component {

  constructor(props){
    super(props);
    this.handleScroll = this.handleScroll.bind(this);
  }
    componentDidMount() {
      window.addEventListener('scroll', this.handleScroll);
    };

    handleScroll(event) {
      console.log('the scroll things', event)
    };

  render(){
    return(
      <div onScroll={this.handleScroll.bind(this)} className ="Nav">
        <Logo/>
        <Menu/>
      </div>

    )
  }
};

在构造函数中应该绑定每个动作。在组件Mount之前添加EventListener是必需的。

如果用户采取行动onScroll，我需要添加课程.Nav Shadow。

如何使用最简单的解决方案在handleScroll函数中添加类？

Answer 1

只需在构造函数中设置一个状态属性，如

this.state={NavClass: 'Nav'}

在handleScroll中将其更改为

handleScroll(event) { 
    let shadow = this.state.shadowClass 
    this.setState({shadowClass : 'Nav_shadow' })
}

并在HTML中将其引用为

className = `${this.state.Nav} Nav`

完成操作后添加课程

1 个答案: