Javascript 如何在单击的按钮上添加类？

如何在单击的按钮上添加类？我需要把它变成一个类，还是可以在常数上添加一个状态？我曾尝试创建一个

handleclick

函数，但似乎无法对常量激发

initialstate

const CaseListItem = ({ currentCase, onCaseSelect }) => {
console.log(currentCase);
  return (
   <div>
     <button onClick={() => onCaseSelect(currentCase)} className={currentCase.color} />
     <div className="media-heading"> {currentCase.title} </div>
   </div>
);
};

const CaseListItem=（{currentCase，onCaseSelect}）=>{
console.log（currentCase）；
返回(
onCaseSelect（currentCase）}className={currentCase.color}/>
{currentCase.title}
);
};

我认为在这种情况下，您应该使用带有状态的组件，并在单击时更新状态颜色名称属性-这将重新呈现您的组件，并且您将能够使用状态属性作为类名。您也可以将此组件保持无状态，但在这种情况下，父组件的状态应在单击子组件（

CaseListItem

）时更新，然后您可以将state color属性作为prop传递给

CaseListItem

组件。只要在状态中有一个值，或者是一个表示类名的值（最初为null），或者是一个指示按钮是否被单击的布尔值，或者其他任何值。然后在render函数中，在className值中可以有一个基于状态值应用该类的三元运算符（例如，如果将其存储为特定值，

如果状态值为null，则返回“”，否则返回{this.state.className}）

在元素的className值中，我尝试将其设置为类，但收到错误提示类CaseListItem扩展组件{render（）{return（this.setState.onCaseSelect（this.state.currentCase）}className={this.state.currentCase.color}/>{this.state.currentCase.title}）；}}对其进行操作是否更好？如果此应用程序使用Redux，则可以执行操作，但问题中没有关于Redux的文字。很抱歉，我使用Redux，这是一种全新的操作。操作是一种更好的方法吗？