完成动作后加一个class

Question

美好的一天。

我有一个 React 组件。是导航栏。

class 导航扩展 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>

    )
  }
};

在构造函数中应该绑定每个动作。稍后在组件挂载之前需要添加 EventListener。

如果用户采取行动onScroll我需要添加class.Nav Shadow.

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

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`

完成动作后加一个class

Adding a class after completing the action

class

add

reactjs