reactjs - 在 React Bootstrap 中更改扩展的 Accordion 面板的标题样式

Question

对于单击和事件/展开面板，我想更改 css 样式。那是因为我想切换一个在面板标题内向上或向下指向的图像箭头。

我能够获得打开面板的 eventKey，但我无法使用面板标题 css 类访问 DOM 元素。

你有什么建议？

谢谢

下面的代码

<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>

Answer 1

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 处理程序的内容作为标题传递给它，可能类似于:

<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>