Javascript 与面板标题中的复选框一致

我想在手风琴的头上打两个复选框

这个例子是用标准的HTML和JS完成的，但是我想用React引导程序来实现这一点

给出的例子很简单

const accordionInstance = (
  <Accordion>
    <Panel header="Collapsible Group Item #1" eventKey="1">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </Panel>
    <Panel header="Collapsible Group Item #2" eventKey="2">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </Panel>
    <Panel header="Collapsible Group Item #3" eventKey="3">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </Panel>
  </Accordion>
);

ReactDOM.render(accordionInstance, mountNode);

我唯一想改进的是，您可以单击整个标题面板来展开或折叠手风琴面板。在此阶段，您只能单击标题词来执行此操作

如果对此有任何建议，请告诉我

<div class="bs-example">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title pull-left">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Demographics</a>
                </h4>
                <div class="pull-right">
                  <label class="checkbox-inline"><input type="checkbox" value=""/>Admission</label>
                  <label class="checkbox-inline"><input type="checkbox" value=""/>Non-Admission</label>
                </div>
                <div class="clearfix"></div>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                  <div class="col-sm-6 col-md-6">
                    <label class="checkbox"><input type="checkbox" value="">NHS Number</label>
                    <label class="checkbox"><input type="checkbox" value="">NHS Verification</label>
                    <label class="checkbox"><input type="checkbox" value="">Weight</label>
                    <label class="checkbox"><input type="checkbox" value="">Height</label>
                    <label class="checkbox"><input type="checkbox" value="">Normal BP</label>

                  </div>
                  <div class="col-sm-6 col-md-6">
                    <label class="checkbox"><input type="checkbox" value="">NOK Details</label>
                    <label class="checkbox"><input type="checkbox" value="">NOK Address</label>
                    <label class="checkbox"><input type="checkbox" value="">Ethnic group - Local list</label>
                    <label class="checkbox"><input type="checkbox" value="">Address</label>
                    <label class="checkbox"><input type="checkbox" value="">Language</label>          
                  </div>
                  <div class="col-sm-6 col-md-6">
                    <label for="usr">Custom Name:</label>
                    <input type="text" class="form-control" id="usr">
                  </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title pull-left">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Admission</a>
                </h4>
                <div class="pull-right">
                  <label class="checkbox-inline"><input type="checkbox" value=""/>Admission</label>
                  <label class="checkbox-inline"><input type="checkbox" value=""/>Non-Admission</label>
                </div>
                <div class="clearfix"></div>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                  <div class="col-sm-6 col-md-6">
                    <label class="checkbox"><input type="checkbox" value="">ICU dates &amp; times</label>
                    <label class="checkbox"><input type="checkbox" value="">HDU dates &amp; times</label>
                    <label class="checkbox"><input type="checkbox" value="">CCU dates &amp; times</label>
                    <label class="checkbox"><input type="checkbox" value="">ICU/HDU discharge details</label>
                    <label class="checkbox"><input type="checkbox" value="">Time of call for ICU discharges</label>
                    <label class="checkbox"><input type="checkbox" value="">Source of admission</label>
                    <label class="checkbox"><input type="checkbox" value="">Consultant</label>
                    <label class="checkbox"><input type="checkbox" value="">Allow patient renumbering</label>
                    <label class="checkbox"><input type="checkbox" value="">Prior surgery undertaken</label>
                    <label class="checkbox"><input type="checkbox" value="">Planned admission</label>
                  </div>
                  <div class="col-sm-6 col-md-6">
                    <label class="checkbox"><input type="checkbox" value="">Default time of response</label>
                    <label class="checkbox"><input type="checkbox" value="">Original hospital admission date</label>
                    <label class="checkbox"><input type="checkbox" value="">Speciality enterable</label>
                    <label class="checkbox"><input type="checkbox" value="">Scored/Triggered by ward</label>
                    <label class="checkbox"><input type="checkbox" value="">NEWS Score</label>  
                    <label class="checkbox"><input type="checkbox" value="">Called for in first trigger</label>
                    <label class="checkbox"><input type="checkbox" value="">Hospital admission date</label>
                    <label class="checkbox"><input type="checkbox" value="">Location prior to source</label>
                    <label class="checkbox"><input type="checkbox" value="">Location</label>
                    <label class="checkbox"><input type="checkbox" value="">Hospital</label>
                  </div>
                  <div class="col-sm-6 col-md-6">
                    <label for="usr">Custom Name:</label>
                    <input type="text" class="form-control" id="usr">
                  </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title pull-left">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Discharge</a>
                </h4>
                <div class="pull-right">
                  <label class="checkbox-inline"><input type="checkbox" value=""/>Admission</label>
                  <label class="checkbox-inline"><input type="checkbox" value=""/>Non-Admission</label>
                </div>
                <div class="clearfix"></div>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
    </div>
    <p><strong>Note:</strong> Click on the linked heading text to expand or collapse accordion panels.</p>
</div>

准许进入
不准入内
NHS号码
NHS验证
重量
高度
正常血压
挪威克朗详细信息
NOK地址
少数民族-本地名单
地址
语言
自定义名称：
准许进入
不准入内
重症监护病房日期及；时代
HDU日期和日期；时代
CCU日期和日期；时代
ICU/HDU出院详情
重症监护病房出院时间
入学来源
顾问
允许患者重新编号
先前进行的手术
计划入院
默认响应时间
原入院日期
专业可输入
由沃德评分/触发
新闻分数
在第一个触发器中调用
入院日期
源之前的位置
位置
医院
自定义名称：
准许进入
不准入内
CSS代表级联样式表。CSS允许您为给定的HTML元素指定各种样式属性，例如颜色、背景、字体等

注意：单击链接的标题文本以展开或折叠手风琴面板

add fiddle for bootstrap code to在我们说话的时候处理它（bootstrap fiddle）

<div class="bs-example">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title pull-left">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Demographics</a>
                </h4>
                <div class="pull-right">
                  <label class="checkbox-inline"><input type="checkbox" value=""/>Admission</label>
                  <label class="checkbox-inline"><input type="checkbox" value=""/>Non-Admission</label>
                </div>
                <div class="clearfix"></div>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                  <div class="col-sm-6 col-md-6">
                    <label class="checkbox"><input type="checkbox" value="">NHS Number</label>
                    <label class="checkbox"><input type="checkbox" value="">NHS Verification</label>
                    <label class="checkbox"><input type="checkbox" value="">Weight</label>
                    <label class="checkbox"><input type="checkbox" value="">Height</label>
                    <label class="checkbox"><input type="checkbox" value="">Normal BP</label>

                  </div>
                  <div class="col-sm-6 col-md-6">
                    <label class="checkbox"><input type="checkbox" value="">NOK Details</label>
                    <label class="checkbox"><input type="checkbox" value="">NOK Address</label>
                    <label class="checkbox"><input type="checkbox" value="">Ethnic group - Local list</label>
                    <label class="checkbox"><input type="checkbox" value="">Address</label>
                    <label class="checkbox"><input type="checkbox" value="">Language</label>          
                  </div>
                  <div class="col-sm-6 col-md-6">
                    <label for="usr">Custom Name:</label>
                    <input type="text" class="form-control" id="usr">
                  </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title pull-left">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Admission</a>
                </h4>
                <div class="pull-right">
                  <label class="checkbox-inline"><input type="checkbox" value=""/>Admission</label>
                  <label class="checkbox-inline"><input type="checkbox" value=""/>Non-Admission</label>
                </div>
                <div class="clearfix"></div>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                  <div class="col-sm-6 col-md-6">
                    <label class="checkbox"><input type="checkbox" value="">ICU dates &amp; times</label>
                    <label class="checkbox"><input type="checkbox" value="">HDU dates &amp; times</label>
                    <label class="checkbox"><input type="checkbox" value="">CCU dates &amp; times</label>
                    <label class="checkbox"><input type="checkbox" value="">ICU/HDU discharge details</label>
                    <label class="checkbox"><input type="checkbox" value="">Time of call for ICU discharges</label>
                    <label class="checkbox"><input type="checkbox" value="">Source of admission</label>
                    <label class="checkbox"><input type="checkbox" value="">Consultant</label>
                    <label class="checkbox"><input type="checkbox" value="">Allow patient renumbering</label>
                    <label class="checkbox"><input type="checkbox" value="">Prior surgery undertaken</label>
                    <label class="checkbox"><input type="checkbox" value="">Planned admission</label>
                  </div>
                  <div class="col-sm-6 col-md-6">
                    <label class="checkbox"><input type="checkbox" value="">Default time of response</label>
                    <label class="checkbox"><input type="checkbox" value="">Original hospital admission date</label>
                    <label class="checkbox"><input type="checkbox" value="">Speciality enterable</label>
                    <label class="checkbox"><input type="checkbox" value="">Scored/Triggered by ward</label>
                    <label class="checkbox"><input type="checkbox" value="">NEWS Score</label>  
                    <label class="checkbox"><input type="checkbox" value="">Called for in first trigger</label>
                    <label class="checkbox"><input type="checkbox" value="">Hospital admission date</label>
                    <label class="checkbox"><input type="checkbox" value="">Location prior to source</label>
                    <label class="checkbox"><input type="checkbox" value="">Location</label>
                    <label class="checkbox"><input type="checkbox" value="">Hospital</label>
                  </div>
                  <div class="col-sm-6 col-md-6">
                    <label for="usr">Custom Name:</label>
                    <input type="text" class="form-control" id="usr">
                  </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title pull-left">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Discharge</a>
                </h4>
                <div class="pull-right">
                  <label class="checkbox-inline"><input type="checkbox" value=""/>Admission</label>
                  <label class="checkbox-inline"><input type="checkbox" value=""/>Non-Admission</label>
                </div>
                <div class="clearfix"></div>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
    </div>
    <p><strong>Note:</strong> Click on the linked heading text to expand or collapse accordion panels.</p>
</div>