Ant Design: Как предотвратить расширение при нажатии на заголовок «Свернуть», но разрешить нажатие на кнопку?

Question

Я использую компонент Ant Collapse, который имеет header с некоторым текстом на Collapse.Panel. Также рядом с текстом заголовка есть компонент Button. Мне нужно разрешить расширение Collapse только по нажатию кнопки, а не по всей панели. Я попытался изобразить здесь пользовательский интерфейс, так как не могу опубликовать снимки экрана.

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

Документ муравья имеет onChange метод, но он не обслуживает событие щелчка (который я мог бы предотвратить, чтобы не потерпеть крах). Как ограничить и разрешить некоторые элементы в этом заголовке, чтобы разрешить / предотвратить такое разборное поведение?

Код Песочница: 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.