如何访问面板标题中的反应引导面板折叠状态

Question

使用react bootstrap可折叠面板时，是否有任何方法可以从面板标题访问面板的折叠状态？在以下示例中：

<Panel>
<Panel.Heading>
<Panel.Title toggle>
This is the title of the panel
<i className="fa fa-angle-double-right" />
</Panel.Title>
</Panel.Heading>
<Panel.Collapse>
<Panel.Body>
This is the body of the panel
</Panel.Body>
</Panel.Collapse>
</Panel>

我希望Panel.Title内部的字体很棒的<i>标签在面板打开时在fa-angle-double-right和fa-angle-double-down之间自动切换，并在面板关闭时切换回来。但我似乎无法从面板标题中访问面板的崩溃状态。

Answer 1

您链接到的文档似乎有您想要的答案。

您应该能够维护一些本地状态this.state.open，并将其作为expanded道具传递给Panel。

class Example extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
// to share the state, we must maintain it ourselves
open: true
};
}

render() {
const iconClass = this.state.open
? 'fa-angle-double-down'
: 'fa-angle-double-right';
return (
<Panel id="example-1" expanded={this.state.open}>
<Panel.Heading> 
<Panel.Title
onClick={() => this.setState({ open: !this.state.open})}>
This is the title of the panel
<i className={iconClass} />
</Panel.Title>
</Panel.Heading>
<Panel.Collapse>
<Panel.Body>
This is the body of the panel
</Panel.Body>
</Panel.Collapse>
</Panel>
);
}
}