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

问题描述

我的问题是，当它在React Bootstrap中处于活动状态时，如何更改它的背景色？谢谢！

select  order_id AS id,order_name AS name from table_name;

解决方法

我认为您想要的是将其应用于var signature = sha1.convert(utf8.encode(date + phone + secretKey)); ，因为它被配置为占据手风琴的整个宽度。您可以利用Card.Header来跟踪可以存储在状态中的活动手风琴项目

eventKey

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

,

您将必须使用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;