完成操作后添加一个类

Question

美好的一天。

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

class 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

只需在构造函数中设置一个state属性即可

this.state={NavClass: 'Nav'}

在handleScroll中将其更改为

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

并在您的HTML中将其引用为

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