javascript - ReactJS：当其中的文本为某个值时如何使按钮背景颜色发生变化

问题描述

我正在开发一个 React 应用程序，我正在使用 Redux 来存储状态。我有以下代码。

button.component.jsx：

import React from 'react';

import './button.styles.scss';

export default ({ children, secondary, className, ...props }) => (
    <button className={`button ${className ? className : ''} ${secondary ? 'secondary' : ''}`} {...props}>{children}</button>
)

button.styles.scss：

.button {
    background-color: #222222;
    border-radius: 5px;
    color: #ffffff;
    min-width: 100px;
    padding: 0 20px;
    height: 40px;
    font-size: 16px;
    cursor: pointer;
    border: 1px solid #222222;
    transition: all 0.2s linear;

    &:active, &:focus {
        outline: none;
    }

    &:hover {
        background-color: #ffffff;
        color: #222222;
    }

    &.secondary {
        background-color: #ffffff;
        color: #222222;
        border: 1px solid #222222;

        &:hover {
            color: #ffffff;
            background-color: #222222;
        }
    }
}

编辑菜单按钮.component.jsx：

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

import Button from '../button/button.component';

class EditMenuButton extends React.Component {

    state = {
        text: "Edit Menu"
    }

    changeText = () => {
        const { text } = this.state;
        if(text === "Edit Menu") {
            this.setState({text: "Save Edits"});
        } else {
            this.setState({text: "Edit Menu"});
        }
    }

    render() {
        const { text } = this.state;

        return (
            <Button onClick={ () => { this.changeText()} }>{text}</Button>
        );
    }
}

export default (EditMenuButton);

menu.component.jsx：

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

import MenuCategory from '../../components/menu-category/menu-category.component'
import NewCategoryButton from '../../components/new-category-button/new-category-button.component';
import EditMenuButton from '../../components/edit-menu-button/edit-menu-button.component';

import './menu.styles.scss';

const MenuPage = props => {

    return (
        <div className='menu-page'>
            {props.menu ? props.menu.map(category => <MenuCategory key={category._id} {...category} />) : null}
            <div className='edit-menu-buttons'>
                <div className='menu-button'>
                    {props.currentUser ? <NewCategoryButton /> : null}
                </div>
                <div className='menu-button'>
                    {props.currentUser ? <EditMenuButton /> : null}
                </div>
            </div>
        </div>
    )
}

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

export default connect(mapStateToProps)(MenuPage);

对于我的EditMenuButton组件，我有一个功能可以在单击按钮时更改按钮文本。当按钮中的文本为“保存编辑”时，我希望按钮的背景颜色#6ad0d4为#222222.

我知道我可以向我的按钮添加一个类，例如'save-edits-true'，然后使用这个类应用样式。Button但是，当组件按钮内的文本EditMenuButton为“保存编辑”时，我不确定如何动态地将类添加到我的组件中。

任何见解都值得赞赏。

标签： javascriptcssreactjsredux

javascript - ReactJS：当其中的文本为某个值时如何使按钮背景颜色发生变化

问题描述

解决方案

推荐阅读