在React Bootstrap中更改扩展的手风琴面板的标题样式 [英] Change header style for expanded Panel of Accordion in React Bootstrap

问题描述

对于单击并处于活动/展开状态的面板，我想更改css样式。那是因为我想切换一个指向面板标题内向上或向下的图像箭头。

For the clicked and active/expanded panel I would like to change the css style. That's because I would like to toggle an image arrow that points up or down inside the header of the panel.

我能够获取打开的面板的eventKey，但是我无法通过 panel-heading css类访问DOM元素。

I'm able to get the eventKey of the open panel, but I'm not able to reach the DOM element with the panel-heading css class.

您有什么建议？

谢谢

下面的代码

<Accordion onSelect={this.handleSelect} >
  <Panel header="Collapsible Group Item #1" eventKey="1">
    Ad vegan
  </Panel>
  <Panel header="Collapsible Group Item #2" eventKey="2">
    Cliche docet
  </Panel>
</Accordion>

这变成

    <div role="tablist" class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 role="presentation" class="panel-title"><a role="tab" aria-expanded="false" aria-selected="false">Collapsible Group Item #1</a></h4></div>
            <div role="tabpanel" class="panel-collapse collapse" aria-hidden="true" style="height: 0px;">
                <div class="panel-body">
                    <!-- react-text: 36 -->Ad vegan
                    <!-- /react-text -->
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 role="presentation" class="panel-title"><a role="tab" aria-expanded="false" aria-selected="false">Collapsible Group Item #2</a></h4></div>
            <div role="tabpanel" class="panel-collapse collapse" aria-hidden="true" style="height: 0px;">
                <div class="panel-body">
                    <!-- react-text: 43 -->Cliche docet
                    <!-- /react-text -->
                </div>
            </div>
        </div>
    </div>

推荐答案

React Bootstrap Panel接受一个节点作为标头（每个： https：// github .com / react-bootstrap / react-bootstrap / blob / v0.20.1 / src / Panel.js＃L144 和 http://react-bootstrap.github.io/components.html#panels-props ），因此您可以将带有适当onClick处理程序的内容作为标头，例如：

The React Bootstrap Panel accepts a node to use as a header (per: https://github.com/react-bootstrap/react-bootstrap/blob/v0.20.1/src/Panel.js#L144 and http://react-bootstrap.github.io/components.html#panels-props), so you can pass in something with the appropriate onClick handler to it as a header, perhaps something like:

<Accordion onSelect={this.handleSelect} >
  <Panel header={<div onClick={() => {console.log('Clicked')}}>"Collapsible Group Item #1"</div} eventKey="1">
    Ad vegan
  </Panel>
  <Panel header="Collapsible Group Item #2" eventKey="2">
    Cliche docet
  </Panel>
</Accordion>

这篇关于在React Bootstrap中更改扩展的手风琴面板的标题样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！