Question

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

我能够获得打开面板的eventKey，但是我无法使用 panel-heading 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接受一个节点用作标题（per：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处理程序将其作为标题传递给它，也许是某些东西像：

{{1}}

Answer 2

我通过构建2个react组件解决了一个类似的问题：一个组件创建PanelGroup，另一个组件创建组中的每个Panel项。然后，在Panel项目组件中，我为toggle onClick事件编写了一个自定义处理程序，该事件将Panel的“ expanded”属性设置为组件的状态。通过使用自定义组件的状态，我可以将每个切换图标的状态保持独立。

自定义面板组组件：

import CustomPanelGroupItem from './CustomPanelGroupItem';
import React from 'react';
import PanelGroup from 'react-bootstrap/lib/PanelGroup';

class CustomPanelGroup extends React.Component {
    render() {
        return (
            <PanelGroup 
                accordion 
                id='custom-panel-group-accordion'
            >
                {
                    PanelGroupData.map((item, key) => {
                        return (
                            <CustomPanelGroupItem
                                eventKey={key}
                                customPanelGroupItem={item}
                            />
                        )
                    })
                }                

            </ PanelGroup>
        )
    }
}

export default CustomPanelGroup;

自定义面板组件：

import Col from 'react-bootstrap/lib/Col';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons'
import Grid from 'react-bootstrap/lib/Grid';
import React from 'react';
import Panel from 'react-bootstrap/lib/Panel';

class CustomPanelGroupItem extends React.Component {
    state = {
        expanded: false,
        toggleIcon: faAngleRight
    }

    handleToggle = () => {
        this.setState({
            expanded: !this.state.expanded,
            toggleIcon: this.state.expanded ? faAngleRight : faAngleDown
        });
    }

     render() {
        return (
            <Panel 
                eventKey={this.props.eventKey}
                expanded={this.state.expanded}
            >
                <Panel.Heading >
                    <Panel.Toggle 
                        componentClass='div'
                        onClick={this.handleToggle}
                    >
                        {/* Code here for the panel toggle */} 
                    </Panel.Toggle>                 
                </Panel.Heading>
                <Panel.Body collapsible>
                    {/* Code here for the panel body */}
                </Panel.Body>
            </Panel>
        )
    }
}

export default CustomPanelGroupItem;

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

2 个答案: