Ant Design：如何在单击折叠标题时防止扩展，但允许按钮？

Question

我正在使用 Ant 的 Collapse 组件，它header在Collapse.Panel. Button标题文本旁边还有一个组件。我只需要在单击按钮时才允许折叠展开，而不是在整个面板上。我试图在这里描绘用户界面，因为我无法发布屏幕截图。

 ____________________________________________________________
|                                                            |
|Panel Header Text <-- prevent                               |
|[Button]     <-- allow                                      |
|____________________________________________________________|

Ant 的文档有onChange方法，但它不适合单击事件（我可以防止不使 Collapse exapnd）。如何限制和允许该标头上的某些元素允许/防止这种可折叠行为？

代码沙盒：https : //codesandbox.io/s/hopeful-payne-ezpdn

Answer 1

将您的头节点更改为：

const panelHeader = (
  <React.Fragment>
    <Row onClick={event => event.stopPropagation()}><Col><Typography.Text>Header</Typography.Text></Col></Row>
    <Button>Expand</Button>
  </React.Fragment>
)

您的面板节点应该是：

<Panel showArrow={false} header={panelHeader} key="1">
      <p>{text}</p>
</Panel>

并将此 Css 添加到您的样式中：

.ant-collapse > .ant-collapse-item > .ant-collapse-header {
   padding: 0 !important;
}

.ant-btn {
   position: absolute;
   left: 15px;
   bottom: 15px;
}

.ant-typography {
   display: block;
   height: 80px;
   margin-left: 15px;
   margin-top: 15px;
}

您应该在具有 stopPropagation 方法的行中添加箭头图标节点。