点击时对映射元素做出反应切换样式

Posted 2023-04-14

【中文标题】点击时对映射元素做出反应切换样式

【英文标题】：React toggle style on mapped element on click

【发布时间】：2021-12-25 18:40:08

【问题描述】：

这里是 React 新手。一件非常简单的事情，我似乎无法做对。

我想从我的地图中更改点击元素上的类，而不是全部。

例如，如果我单击 id 为 1 的元素，它应该有一个“active-color”类。如果我然后单击 id 为 2 的元素，则该元素应采用类 'active-color' 并且 id 1 应该不再具有此类。

我尝试了许多不同的解决方案，但似乎无法做到这一点。它似乎不喜欢我在这里使用我的处理函数中的钩子并返回错误：TypeError: setActive is not a function。

任何想法或其他解决方案将不胜感激！

const ListItems =  () => 

  const  isActive, setActive = useState(false)
  const  item, dispatch  = useContext(AppContext);

  const handler = (event) => 
        dispatch(
            type: 'SET_ITEM',
            payload: event.currentTarget.dataset.index,
        );
    setActive(!isActive);
    ;


  return (
    <div className="container">
      <h2 className="smallheader">Please choose one</h2>
      <div className="flex flex-center">
      ITEMS.map((item) =>
        <div className=isActive ? 'active-color' : 'card' data-index=item.value key=item.id onClick=handler>
        <span
          className="card-header">item.name</span>
        <span className="card-description">item.description</span>
        </div>
      )
      </div>
    </div>
  )
;
 
 
export default ListItems;

【参考方案1】：

您的第一个问题是 useState() 返回一个数组，而不是一个对象。这意味着当您 destructure isActive 和 setIsActive 时，您需要使用数组解构 []：

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

根据您的AppContext 的设置方式，您可能还需要对项目和调度使用数组解构。您的下一个问题是上述状态仅存储一个布尔值。如果为真，则在映射时渲染的每个值都是true。这意味着当 active 设置为 true 时，所有项目都将应用活动类。为了帮助管理这一点，您可以更改您的状态值以保存活动项目的 ID。然后在你的映射回调函数中，检查当前item id是否与你的state中存储的id匹配，如果匹配，使用active-color类，否则使用card类。

const [activeItem, setActiveItem] = useState(-1);

const handler = (itemId) => 
 
  dispatch( // you may want to conditionally call this,  but I'm basing it off your current logic
    type: 'SET_ITEM',
    payload: itemId,
  );
 
  setActiveItem(currentItem => currentItem === -1 ? itemId : -1); // toggle between -1 and itemPressed to make active state toggleable
;

return (
  <div className="container">
    <h2 className="smallheader">Please choose one</h2>
    <div className="flex flex-center">
      ITEMS.map((item) =>
        <div className=activeItem === item.id ? 'active-color' : 'card' key=item.id onClick=() => handler(item.id)>
        ...

【参考方案2】：

数组解构需要方括号：

代替：

const  isActive, setActive = useState(false)
const  item, dispatch  = useContext(AppContext);

写：

const [ isActive, setActive] = useState(false)
const [ item, dispatch ] = useContext(AppContext);

【讨论】：

啊，好点，我怎么错过了！谢谢