在React中从 "untoggled "项目中删除一个类,并将其分配给选定的项目。

我做了一个拨动组件(准确的说是Accordion)。

我正在通过一个对象数组进行映射,并像这样列出它们。

{object.map((o) => (
   <Accordion key={o.id} title={o.question} className="item">
     <div className="text"> { o.answer } <div/>
   </Accordion>
))}

它的显示方式是这样的

> Question 1
> Question 2
> Question 3

现在,每当我点击一个问题,它就会向下显示答案。所有这些工作都很好(我使用了钩子)。

我希望能够在打开其中一个问题时改变列表中所有未切换元素的不透明度。

所以,如果我打开问题2,它就会成为 “当前项目”,问题2和它的答案的不透明度应该是100%,而其他所有的问题(问题1和问题3)应该变暗或变成50%的不透明度。我可以用css的:hover来实现,但那只在悬停时有效。

基本上在理论上,我应该能够选择一个项目,并删除所有其他项目的基本类,除了选定的一个。我不知道如何在现实中做到这一点。求助。我觉得我好像漏掉了一些明显的东西。

const Accordion = ({ title, children, opened = false }) => {
  const [show, setShow] = useState(opened);
  const rotation = classnames('icon', {
    'rotate': show,
  });
  const content = classnames('contents', {
    'closed': !show,
  });

  useEffect(() => {
    setShow(opened);
  }, [opened]);

  const toggle = useCallback(() => {
    setShow(!show);
  }, [show]);

  return (
      <div className='titleContainer' onClick={toggle}>
        <div className={rotations}>
          <i className='icon' />
        </div>
        <h5 className='title'>{title}</h5>
      </div>
      <div className={content}>{children}</div>
  );
};

解决方案:

我终于明白你的意思了,我想这就是答案。

const questionColor = (questionIndex, activeQuestion) => {
    if (activeQuestion !== null && activeQuestion !== questionIndex) {
      return "rgba(0,0,0,0.1)";
    } else return "rgba(0,0,0,1)";
  };

工作方案在这里:https:/codesandbox.iosocky-hellman-fxrmc。

给TA打赏
共{{data.count}}人
人已打赏
解决方案

(已解决)无法将类型为'system.byte'的对象转换为类型为'system.string'的对象(combobox populate PictureBox)

2022-5-14 13:00:34

解决方案

Dart.Await函数调用没有等待并返回Future对象。Await函数调用没有等待并返回Future对象。

2022-5-14 13:00:36

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索