ReactStrap折叠阻止切换兄弟姐妹onClick

Question

我在几个stackoverflow线程中研究了这个答案但到目前为止没有任何工作。我正在使用Reactstrap折叠切换，但我没有外部按钮，我在“li”标签上有onClick方法。

问题在于我试图阻止传播给额外的“li”而没有成功。所以，如果我点击一个李，每个李打开，然后关闭。

import React, { Component } from 'react';
import { Col, Collapse, ListGroup, ListGroupItem } from 'reactstrap';
import Data from '../data/data.json';

class Example extends Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = { 
      collapse: false, 
      Data: Data
    };
  }

  toggle = (e) => {
    this.setState({ collapse: !this.state.collapse });
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
  }

  render() {
    return (
      <Col xs={12} md={6} lg={6} className="right-col">
      
        <ListGroup onClick={this.toggle}>
          {  Data.projectLinks.map((link) => {
          return  <ListGroupItem key={link.title} onClick={(e) => {this.toggle(e)}}>
            {link.title}
            <Collapse isOpen={this.state.collapse}>
              <p>{link.description}</p>
            </Collapse>
          </ListGroupItem> 
          })
        }
        </ListGroup>
      </Col>
    );
  }
}

export default Example;

如果你知道如何完成这个或其他解决方案，我很感激。