Как сделать так, чтобы цвет менялся, когда активен? - PullRequest
Новая
       23

Как сделать так, чтобы цвет менялся, когда активен?

1 голос
/ 19 апреля 2020

Я создаю раздел часто задаваемых вопросов на моем веб-сайте, где вы сможете фильтровать вопросы, нажав на одну из тем раздела. У меня есть эта функция, однако, что я хочу, чтобы при выборе одного из заголовков разделов, указанный c заголовок должен измениться с красного на черный и подчеркнут. Когда мышь удерживается, она работает, но как только я позволю go, она снова изменится. Как мне заставить это оставаться в этом состоянии, когда этот определенный раздел активен?

CSS: 

#portfolio .portfolio-list .nav li {
 margin: 0 40px 0 0;
 float: left;
 color: #C42B32;
 line-height: 16px;
 cursor: pointer;
 font-size: 20px;
 font-weight: 600 ! important;
 font-family: 'Assistant', sans-serif ! important;
 letter-spacing: 0.02em;
 -moz-transition: all 0.5s ease-in-out 0s;
 -ms-transition: all 0.5s ease-in-out 0s;
 -o-transition: all 0.5s ease-in-out 0s;
 -webkit-transition: all 0.5s ease-in-out 0s;
 transition: all 0.5s ease-in-out 0s;
 text-transform: uppercase;
}

#portfolio .portfolio-list .nav li:hover, #portfolio .portfolio-list .nav li.filter-active {
 color: #000000;
 -moz-transition: all 0.5s ease-in-out 0s;
 -ms-transition: all 0.5s ease-in-out 0s;
 -o-transition: all 0.5s ease-in-out 0s;
 -webkit-transition: all 0.5s ease-in-out 0s;
 transition: all 0.5s ease-in-out 0s; }

#portfolio .portfolio-list .nav li:active, li:focus, li:focus-within {
color: #000000 ! important;
text-decoration: underline;
}

Названия: 

import React from 'react';

export default class Filters extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="portfolio-list">
                <ul className="nav list-unstyled" id="portfolio-flters">
                    <li className="faqnav" data-item="all" onClick={this.props.filter}>All</li>
                    <li className="faqnav" data-item="general" onClick={this.props.filter}>General</li>
                    <li className="faqnav" data-item="stats" onClick={this.props.filter}>Stats</li>
                    <li className="faqnav" data-item="account" onClick={this.props.filter}>Account</li>
                    <li className="faqnav" data-item="social" onClick={this.props.filter}>Social Media</li>
                </ul>
            </div>
        );
    }
}[![Screenshot][1]][1]

1 Ответ

1 голос
/ 19 апреля 2020

Попробуйте выполнить следующее: import React из 'response'; 

export default class Filters extends React.Component {

    constructor(props) {
        super(props);
    }

    state = {
        activeFilter: 0,
    }

    render() {
        return (
            <div className="portfolio-list">
                <ul className="nav list-unstyled" id="portfolio-flters">
                    <li className={`faqnav ${this.state.activeFilter === 1 ? 'active': ''}`}  data-item="all" onClick={(e) => this.filter(e, 1)}>All</li>
                    <li className={`faqnav ${this.state.activeFilter === 2 ? 'active': ''}`}  data-item="general" onClick={(e) => this.filter(e, 2)}>General</li>
                    <li className={`faqnav ${this.state.activeFilter === 3 ? 'active': ''}`}  data-item="stats" onClick={(e) => this.filter(e, 3)}>Stats</li>
                    <li className={`faqnav ${this.state.activeFilter === 4 ? 'active': ''}`}  data-item="account" onClick={(e) => this.filter(e, 4)}>Account</li>
                    <li className={`faqnav ${this.state.activeFilter === 5 ? 'active': ''}`}  data-item="social" onClick={(e) => this.filter(e, 5)}>Social Media</li>
                </ul>
            </div>
        );
    }

    filter = (e, filterId) => {
        this.setState({
            activeFilter: filterId,
        });
        this.props.filter(e);
    }
}

CSS: 

.faqnav.active {
    color: #000;
    text-decoration: underline;
}

Объяснение: Добавьте локальное состояние, в котором сохраняется текущий активный фильтр. Для каждого фильтра назначьте какой-нибудь идентификатор, я предлагаю вам сделать это с константами. После этого при каждом нажатии на фильтр сохраняйте идентификатор выбранного фильтра в состоянии и выполняйте обычный обработчик onClick. Затем добавьте в каждый <li> флажок для текущего активного фильтра и добавьте активный класс.

Надеюсь, это поможет.

...