如何添加/删除在React中动态添加的元素上选择类onClick

在React中动态添加的元素上添加选择类onClick的方法可以通过以下步骤实现：

首先，确保你已经安装了React和React DOM，并且已经创建了一个React组件。
在组件的构造函数中，创建一个状态变量来跟踪动态添加的元素的选择状态。例如，可以使用useState钩子来创建一个名为selected的状态变量，并将其初始值设置为一个空数组。

import React, { useState } from 'react';

function MyComponent() {
  const [selected, setSelected] = useState([]);

  // 其他组件代码...

  return (
    // 组件的JSX代码...
  );
}

export default MyComponent;

在动态添加元素的逻辑中，为每个元素添加一个onClick事件处理程序。当元素被点击时，将其唯一标识符（例如ID或索引）添加到selected状态变量中。

function MyComponent() {
  const [selected, setSelected] = useState([]);

  const handleElementClick = (id) => {
    setSelected([...selected, id]);
  };

  // 动态添加元素的逻辑...

  return (
    <div>
      {elements.map((element) => (
        <div key={element.id} onClick={() => handleElementClick(element.id)}>
          {element.content}
        </div>
      ))}
    </div>
  );
}

如果需要删除已选择的元素，可以在元素上再次点击时从selected状态变量中移除它。

function MyComponent() {
  const [selected, setSelected] = useState([]);

  const handleElementClick = (id) => {
    if (selected.includes(id)) {
      setSelected(selected.filter((selectedId) => selectedId !== id));
    } else {
      setSelected([...selected, id]);
    }
  };

  // 动态添加元素的逻辑...

  return (
    <div>
      {elements.map((element) => (
        <div
          key={element.id}
          onClick={() => handleElementClick(element.id)}
          className={selected.includes(element.id) ? 'selected' : ''}
        >
          {element.content}
        </div>
      ))}
    </div>
  );
}

在上述代码中，我们使用了一个selected状态变量来跟踪已选择的元素。当元素被点击时，我们检查它是否已经在selected数组中。如果是，则从selected数组中移除它；如果不是，则将其添加到selected数组中。通过为已选择的元素添加一个特定的类名（例如'selected'），我们可以在CSS中定义样式来突出显示这些元素。

请注意，上述代码只是一个示例，你可以根据自己的需求进行修改和扩展。此外，腾讯云提供了一系列与React开发相关的产品和服务，例如云服务器、云数据库、云存储等，你可以根据具体需求选择适合的产品。你可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于这些产品的详细信息。