React.js Bootstrap Accordion 单击时更改背景颜色答案

【问题标题】：React.js Bootstrap Accordion change background color when clickedReact.js Bootstrap Accordion 单击时更改背景颜色
【发布时间】：2020-09-29 04:37:03
【问题描述】：

我的问题是如何在 react bootstrap 中激活手风琴背景颜色？谢谢！

class App extends React.Component {
  render() {
    return (
      <div>
         <Accordion>
           <Card>
            <Card.Header>
              <Accordion.Toggle as={Button} variant="link" eventKey="0">
              All movies
              </Accordion.Toggle>
            </Card.Header>
            [....]
      </div>
    );
  }
}

【问题讨论】：

按照 CSS 方式进行操作：在手风琴项打开时查找引导添加的类，并使用纯 CSS 设置元素的样式。使用 React 的另一种方法是将活动项保存在状态中，并有条件地添加 style 属性以反映相同。
@Dane 好的，我添加了一个 css 类 .selected 但如何保存状态？谢谢顺便说一句:)

标签： javascript reactjs react-bootstrap

【解决方案1】：

我认为您想要的是将其应用于Card.Header，因为它被配置为占据手风琴的整个宽度。您可以利用eventKey 跟踪您可以存储在状态中的活动手风琴项

state = {
  activeEventKey: "0"
};

activeColor = "#dddddd";

<Card.Header
  {...(this.state.activeEventKey === "0" && {
    style: { backgroundColor: this.activeColor }
  })}
>
  <Accordion.Toggle
    as={Button}
    variant="link"
    eventKey="0"
    onClick={() => this.setState({ activeEventKey: "0" })}
  >
    Click me!
  </Accordion.Toggle>
</Card.Header>

手风琴示例来自：https://react-bootstrap.github.io/components/accordion/

【讨论】：

【解决方案2】：

您必须使用useState() 挂钩来跟踪打开的手风琴键，以便您可以动态设置它。之后，您必须检查每张卡片当前打开的密钥，如果它与卡片的密钥匹配，您将通过设置backgroundColor 动态更改样式。一个可行的例子是：

import React, { useState } from "react";
import "./App.css";

import { Accordion, Card } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
  const [currentActiveKey, setCurrentActiveKey] = useState(null);

  const toggleActiveKey = (key) => {
    setCurrentActiveKey(currentActiveKey === key ? null : key);
  };

  return (
    <div className="App">
      <Accordion>
        <Card
          style={currentActiveKey === "0" ? { backgroundColor: "red" } : null}
        >
          <Card.Header>
            <Accordion.Toggle
              onClick={() => {
                toggleActiveKey("0");
              }}
              variant="link"
              eventKey="0"
            >
              All Movies
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="0">
            <div className="panel-body">Body content for panel 1</div>
          </Accordion.Collapse>
        </Card>

        <Card
          style={currentActiveKey === "1" ? { backgroundColor: "red" } : null}
        >
          <Card.Header>
            <Accordion.Toggle
              onClick={() => {
                toggleActiveKey("1");
              }}
              variant="link"
              eventKey="1"
            >
              All Movies 2
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="1">
            <div className="panel-body">Body content for panel 2</div>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    </div>
  );
}

export default App;

【讨论】：

谢谢你，但我有不止一把手风琴

【解决方案3】：

对于 react-bootstrap 5，只需覆盖 CSS：

.accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: #29008a;
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}

根据您的选择更改颜色、背景颜色。

【讨论】：