ReactJS: изменение свойства наведения кнопки в зависимости от текста внутри кнопки

Question

Я работаю над приложением React и использую Redux для хранения состояния. У меня есть следующий код:

request.component.jsx:

import React, { Component } from 'react';
import { connect } from 'react-redux';

import Loading from '../loading/loading.component';
import { changeRequestStatus } from '../../redux/requests/requests.actions';
import { RESOLVED, AWAITING_WAIT_STAFF } from '../../redux/requests/requests.status-types'
import './request.styles.scss';

class Request extends Component {
    state = { isLoading: false }

    render() {
        const { _id, table_no, timestamp, description, status } = this.props.request;
        const { user, changeRequestStatus } = this.props;

        return (
            <>
            {this.state.isLoading ? <Loading /> : null}
            <div className="request-box">
                <div className="request-details">
                    <div>
                        <h1 style={{ color: status === AWAITING_WAIT_STAFF ? "#28bfa6" : "#f5a953" }}>Table {table_no}, {new Date(timestamp).toLocaleString()}</h1>
                        <h2>{description}</h2>
                    </div>
                    <div className="status-button">
                        <button
                            className="request-button"
                            onClick={async () => {
                                this.setState({ isLoading: true })
                                await changeRequestStatus(_id, status === AWAITING_WAIT_STAFF ? user.username : RESOLVED)
                                this.setState({ isLoading: false })
                            }} style={{ background: status === AWAITING_WAIT_STAFF ? "linear-gradient(to right,  rgba(141,227,227,1) 0%, rgba(114,240,218,1) 100%)" : "linear-gradient(to right, rgba(255,213,94,1) 0%, rgba(246,170,123,1) 100%)" }}>

                            {status}

                        </button>
                    </div>
                </div>
            </div>
            </>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        requests: state.requests.requests,
        user: state.user.currentUser
    }
}

export default connect(mapStateToProps, { changeRequestStatus })(Request);

request.styles.s css:

.request-box {
    border: 1px solid #c3c9c8;
    height: 200px;
    max-width: 100%;
    border-radius: 5px;
    position: relative;
    background-color: white;
    font-family: Helvetica;
    box-shadow: 0 10px 6px -6px #ededed;
    margin: 10px;
}

.request-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    height: 100%;

    h1 {
        font-size: 30px;
        color: #28bfa6;
        text-align: left;
    }

    h2 {
        font-size: 22px;
        text-align: left;
    }
}

.status-button {
    padding-bottom: 25px;
    width: 100%;

    @media (min-width: 1000px) {
        width: auto;
        padding-right: 20px;
        padding-left: 100px;
    }
}

.request-button {
    height: 50px;
    font-size: 19px;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    padding: 10px 25px;
    background-size: 150% auto;
    background: linear-gradient(to right, rgba(141,227,227,1) 0%, rgba(114,240,218,1) 100%);
    cursor: pointer;

    &:hover {
        background: #2de1c2;
    }
}

В моем компоненте запроса, Я изменяю свойство background моего request-button div в зависимости от значения переменной status.

Однако я хотел бы изменить свойство request-buttton:hover в зависимости от значения переменной состояния в моем компоненте Request.

Я не уверен, какой будет правильный синтаксис для достижения этой цели. Любые идеи приветствуются.

Answer 1

Создание различных CSS классов для каждой кнопки цвета / статуса. Затем используйте троичный оператор, чтобы применить класс CSS к кнопке при изменении статуса. Проверьте состояние через Redux, а затем примените CSS className , например .