React onClick向单击的元素添加类，但从其他元素中删除

React是一个流行的JavaScript库，用于构建用户界面。它提供了一种声明式的编程模型，使开发人员能够轻松地构建交互式UI组件。

在React中，可以使用onClick事件处理程序向单击的元素添加类。要实现这个功能，可以使用React的状态管理机制。

首先，在React组件的构造函数中定义一个状态变量，用于跟踪当前被单击元素的类名。例如：

constructor(props) {
  super(props);
  this.state = {
    activeElement: null
  };
}

然后，在单击事件处理程序中更新状态变量，以便添加或删除类名。例如：

handleClick(elementId) {
  this.setState(prevState => ({
    activeElement: prevState.activeElement === elementId ? null : elementId
  }));
}

在上述代码中，handleClick函数接收一个元素ID作为参数。它首先检查当前活动元素是否与传入的元素ID相同，如果相同，则将活动元素设置为null，否则将其设置为传入的元素ID。

最后，在渲染方法中，根据状态变量的值为相应的元素添加或删除类名。例如：

render() {
  return (
    <div>
      <div
        className={this.state.activeElement === 'element1' ? 'active' : ''}
        onClick={() => this.handleClick('element1')}
      >
        Element 1
      </div>
      <div
        className={this.state.activeElement === 'element2' ? 'active' : ''}
        onClick={() => this.handleClick('element2')}
      >
        Element 2
      </div>
      {/* 其他元素 */}
    </div>
  );
}

在上述代码中，根据状态变量的值，如果活动元素是'element1'，则为第一个元素添加类名'active'，否则不添加。类似地，如果活动元素是'element2'，则为第二个元素添加类名'active'，否则不添加。

这样，当单击元素时，React会根据状态变量的值重新渲染组件，并根据需要添加或删除类名，从而实现向单击的元素添加类，但从其他元素中删除的效果。

需要注意的是，上述代码中的类名和元素ID仅作示例，您可以根据实际情况进行调整。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云数据库MySQL。您可以通过以下链接了解更多信息：