在reactJS中动态更改样式类

Question

我有这个按钮组件，用于日历组件的天数。下面是按钮组件的代码：

import { html } from '../../../web_modules/htm/react.js';

export default ({ buttons }) => {
    return buttons.map(val => {
        let outDateclassName = false;
        let isSelected = '';
        if (val.flag !== 'currentMonth') {
            outDateclassName = 'outside-month';
        }
        if (val.isSelected) {
            isSelected = 'day-selected';
        }
        // isSelected = val.value;
        return html`
            <button
                className='button button--28 datepicker__day ${outDateclassName} ${isSelected} ${val.circleStart} ${val.circleEnd}'
                type='button'
                aria-label='${val.value}'
                aria-selected='false'
                disabled='${val.dateDisabled}'
                tabIndex='-1'
                onClick=${() => { isSelected = val.value; }}
                >
                <span className='button__children'>${val.value}</span>
            </button>
        `;
    });
};

val.value返回单击日期的值。

我想要的是当日期被点击时，按钮应该变成黑色。day-selected是具有黑色代码的类：

.day-selected {
  color: #fff !important;
  background: #000 !important;
  border-radius: 0;
}

我该如何更改代码呢？

Answer 1

你必须在状态下保存isSelected。您的is功能组件u可以使用react

如果状态值更改，它将呈现exm：

import {useState} from 'react' const [isSelected, setIsSelected] = useState()