点击时反应切换类。映射列表项

【问题标题】：React toggle class on click. Mapping list items点击时反应切换类。映射列表项
【发布时间】：2020-09-15 17:55:03
【问题描述】：

我正在将对象的项目映射到列表项目。我想为我点击的特定项目更改类。

目前所有映射的项目在点击时都会获得“完成”类。

import React, {useState} from 'react';
import Tasks from '../data.json';


function List() { 
  const tasks = Tasks.Tasks
  const [isActive, setActive] = useState(false);

  const toggle = () => {
    setActive(!isActive);
  };

  return (
    <div>
      <ul>
        {
          tasks.map((item, i) => (
            <li
              className={isActive ? 'Done': ""}
              key={i}
              onClick={toggle}
            >
              {item}
            </li>
          ))
        }
      </ul>
    </div>
  )
}

export default List;

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

每当isActive 设置为true 时，您将向您的每个列表项提供Done 类。也许尝试像这样初始化isActive：

const [isActive, setActive] = useState(null);
const toggle = (i) => {
  setActive(i);
};

然后以这种方式给Done 类：

<li className={isActive === i ? 'Done': ""} key={i} onClick={() => toggle(i)}>{item}</li>

您还可以通过以下方式初始化isActive，将所有活动索引存储在一个数组中：

const [isActive, setActive] = useState([]);

然后写你的钩子：

const toggle = (i) => {
  if (isActive.indexOf(i) === -1) {
    setActive([...isActive, i]);
  }
};

然后您可以执行以下操作，以便为您单击的所有 div 提供类。

<li className={isActive.indexOf(i) !== -1 ? 'Done': ""} key={i} onClick={() => toggle(i)}>{item}</li>

【讨论】：