我正在使用Ant的Collapse组件,该组件的header
带有Collapse.Panel
上的一些文本。标题文本旁边还有一个Button
组件。我只需要在按钮单击上而不是在整个面板上允许Collapse的展开即可。我试图在此处描绘UI,因为我无法发布屏幕截图。
____________________________________________________________
| |
|Panel Header Text <-- prevent |
|[Button] <-- allow |
|____________________________________________________________|
Ant's document具有onChange
方法,但是它不适合单击事件(可以防止不使Colap崩溃)。如何限制和允许该标头上的某些元素允许/阻止此可折叠行为?
将标题节点更改为此:
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;
}