Question

使用react-bootstrap Collapsible Panel时，是否可以通过面板标题访问面板的折叠状态？在以下示例中：

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

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

Answer 1

您链接到的文档似乎可以找到您想要的答案。

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

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>
    );
  }
}

如何访问面板标题中的react-bootstrap面板折叠状态？

1 个答案: