Javascript 反应如何在单击时在元素中添加类？

我是新来的。目前我正在创建一个用于学习目的的应用程序。 我被困在试图改变点击按钮的颜色。当我点击一个按钮时，所有按钮的颜色都会改变。但我只需要有一个按钮处于活动状态，而其他按钮则不处于活动状态。当我单击其他按钮时，上一个活动按钮将丢失其类并变为非活动。 你能帮我吗

state = {
  clicked: false
};

timeChangeHandler = () => {
  this.setState({ clicked: true });
};

render() {
  return (
    <div>
      <button
        type="button"
        className={
          this.state.clicked
            ? "list-group-item list-group-item-action active"
            : "list-group-item list-group-item-action"
        }
        onClick={this.timeChangeHandler}
      >
        8:00
      </button>

      <button
        type="button"
        className={
          this.state.clicked
            ? "list-group-item list-group-item-action active"
            : "list-group-item list-group-item-action"
        }
        onClick={this.timeChangeHandler}
      >
        9:00
      </button>
    </div>
  );
}

状态={
单击：false
};
timeChangeHandler=（）=>{
this.setState（{单击：true}）；
};
render（）{
返回(
8:00
9:00
);
}

您的解决方案看起来像这样

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            activeButton: 0
        };
    }

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

        return (
            <div>
                <button
                    className={ activeButton === 0 && "active" }
                    onClick={() => this.setState({activeButton: 0})}
                />

                <button
                    className={ activeButton === 1 && "active" }
                    onClick={() => this.setState({activeButton: 1})}
                />

                <button
                    className={ activeButton === 2 && "active" }
                    onClick={() => this.setState({activeButton: 2})}
                />
            </div>
        );
    }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
活动按钮：0
};
}
render（）{
const{activeButton}=this.state；
返回(
this.setState（{activeButton:0}）}
/>
this.setState（{activeButton:1}）}
/>
this.setState（{activeButton:2}）}
/>
);
}
}

以下是一个简单的示例，说明如何做到这一点。我映射按钮并使用索引作为单击的值。但是，如果您像在代码中一样静态地使用按钮，则可以使用@Kyle的解决方案

const按钮=[
{
姓名：“富”
},
{
名称：“酒吧”
},
{
名称：“baz”
}
];
类应用程序扩展了React.Component{
状态={
单击：空
};
handleClick=id=>this.setState（{单击：id}）；
render（）{
返回(
{buttons.map（（按钮，索引）=>(
this.handleClick（index）}
>
{button.name}
))}
);
}
}
render（，document.getElementById（“根”））
。单击{
背景色：红色；
}

Hi。您应该将您的代码添加到问题中作为。欢迎使用SO。我同意“安迪”。如果你提供一个最小的例子，我们可以帮助你更好。但是，您可能无法保持单独的“单击”状态。你应该有一个“点击”状态，并保持你的按钮id或任何其他唯一的东西，以获得正确的状态并有条件地更改你的类。React是关于状态的。你所描述的听起来像是在存储一个布尔值；您需要的是一个整数值，即当前活动按钮的索引。单击按钮更新状态以指向自身。抱歉，我添加了代码。下面是一个示例应用程序：非常感谢！这对我帮助很大！太完美了！非常感谢你！