Как изменить класс навигационной панели при прокрутке вниз в реакции? - PullRequest
Новая
       72

Как изменить класс навигационной панели при прокрутке вниз в реакции?

0 голосов
/ 28 сентября 2019

привет, это мой код, и я хочу изменить цвет панели навигации при прокрутке, но как я могу это сделать?

я хочу удалить свой класс и добавить в него новый класс, но я не могу сделатьэто и я новичок в реакции.мне нужны крючки жизненного цикла?что я должен сделать для моего государства?

import React from 'react';
import DrawerToggleButton from '../SideDrawer/DrawerToggleButton'
import './Toolbar.css'

class Toolbar extends React.Component {
    state = {

    };
    
    scroll = () => {
        if (this.scrollTop() <= 10){
            (".toolbar").addClass("scroll");
        }
        else{
            (".toolbar").removeClass("scroll")
        }

    };
    render() {

        return(
            <header className="toolbar">
                <nav className="toolbar__navigation">
                    <div className="toolbar__toggle-button">
                        <DrawerToggleButton click={this.props.drawerClickHandler} />
                    </div>
                    <div className="toolbar__logo"><a href={"/"}>THE LOGO</a></div>
                    <div className="spacer"/>
                    <div className="toolbar_navigation-items">
                        <ul>
                            <li><a href={"/"}>Products</a> </li>
                            <li><a href={"/"}>Users</a> </li>
                        </ul>
                    </div>
                </nav>
            </header>
        );

    }
}

export default  Toolbar;

and this is my css code:
.toolbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(
            to right,
            #e4faff 0%,
            #e9f8ff 50%,
            #f9f6ff 50%,
            #e9f8ff 100%);
    height: 56px;
    z-index: 200;
}
.toolbar__navigation {
    display: flex;
    height: 100%;
    align-items: center;
    padding: 0 1rem;
}

.toolbar__logo {
    margin-left: 1rem;
}

.toolbar__logo a {
    color: #3500b6;
    text-decoration: none;
    font-size: 1.5rem;
}

.spacer {
    flex: 1;
}

.toolbar_navigation-items ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.toolbar_navigation-items li {
    padding: 0 0.5rem;
}

.toolbar_navigation-items a {
    color: #370ab6;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
}

.toolbar_navigation-items a:hover,
.toolbar_navigation-items a:active {
    color: #000000;
    border-bottom: 2px solid black;
}

.toolbar.scroll {
    background-color: black;
    color: white;
}

@media (max-width: 768px) {
    .toolbar_navigation-items {
        display: none;
    }
}

@media (min-width: 769px) {
    .toolbar__toggle-button {
        display: none;
    }

    .toolbar__logo {
        margin-left: 0;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Я использовал javascript, как я сейчас об этом синтаксисе, но в ответ, что я должен делать?

...