react.js - 使用ant-design折叠面板，如何阻止点击子控件触发了父控价的方法？

问题描述

问 题

使用antd的折叠面板，在折叠面板的header加一个chexbox，点击chexbox触发了折叠面板的展开和合并方法，如何不让它触发呢？代码是这样的

 <Panel key={item.id} header={
                                    <Checkbox indeterminate={this.state[item.value + 'indeterminate']}
                                        onChange={this.onCheckAllChange.bind(this, item.value)}
                                        checked={this.state[item.value + 'checkAll']}>{item.label}</Checkbox>
                                }>
                                    <Checkbox.Group value={this.state[item.value + 'checkedList']} onChange={this.onChange}>
                                        <Row>
                                            {this.props.datapointtemplates.filter(data => data.BelongToTable === item.value).map((info, index) => {
                                                return (
                                                    <Col key={info.id} sm={8} xs={24}>
                                                        <Checkbox value={info.id} >{info.DataPointName}</Checkbox>
                                                    </Col>
                                                );
                                            })}
                                        </Row>
                                    </Checkbox.Group>
                                </Panel>
                                

效果如下图：

查了一些资料说是使用 e.stopPropagation(); 阻止事件传递，但是我再onCheckAllChange方法里使用也没效果，老哥们，要如何做啊！！

解决方案

你监听的是change事件，并非click事件。change事件是在值发生变化后被触发，对于checkbox，在check状态发生变化时，click事件已经完成了冒泡阶段。你可以直接使用checkbox类型的input元素，监听input元素的click事件，在click回调中处理你的逻辑，并调用 e.stopPropagation()阻止click事件继续传递，这样外层的pannel就接收不到click事件了。

这篇关于react.js - 使用ant-design折叠面板，如何阻止点击子控件触发了父控价的方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！