reactjs - 箭头图标中的 react-bootstrap Accordion 问题

Question

我正在对我的项目使用 react-bootstrap Accordion 。我正在尝试将向上和向下箭头按钮指示器添加到我的 Accordion 标题中。请检查问题的示例代码

  const [open, setOpen] = useState(false);

    <Accordion.Toggle as={Button} variant="link" eventKey="2" className="according-text" onClick={() => setOpen(!open)}>
                      <i className="mdi mdi-view-headline"> </i>      LINES  {open ? <i className="mdi mdi-menu-down"></i> : <i className="mdi mdi-menu-up"></i>}
                    </Accordion.Toggle>
<Accordion.Toggle as={Button} variant="link" eventKey="2" className="according-text" onClick={() => setOpen(!open)}>
                      <i className="mdi mdi-view-headline"> </i>      MATCH INVICE LINES{open ? <i className="mdi mdi-menu-down"></i> : <i className="mdi mdi-menu-up"></i>}
                    </Accordion.Toggle>

当我单击第一个 Accordion 标题时，第二个 Accordion 标题图标会更改。检查下图初始状态

点击第一个 Accordion 标题后

我如何防止这种情况。你能帮我解决这个问题吗？谢谢

Answer 1

状态应该是Accordion的数组索引，你可以看下面的代码，希望对你有帮助

 const [idx, setIdx] = useState([]);

  {[...yourArray].map((accordion, index) => (
    <Accordion.Toggle
      as={Button}
      variant="link"
      eventKey="2"
      className="according-text"
      onClick={() => {
        if (idx.includes(index)) setIdx(idx.filter(i => i !== index));
        else setIdx([...idx, index]);
      }}
    >
      <i className="mdi mdi-view-headline"> </i> LINES{" "}
      {idx.includes(index) ? (
        <i className="mdi mdi-menu-down"></i>
      ) : (
        <i className="mdi mdi-menu-up"></i>
      )}
    </Accordion.Toggle>
  ))}