请问如何进行使用添加Button在antd/Collapse 的label上，点击Button，不触发折叠的事件？

Question

基于antd 的 折叠块 我使用此代码做到：

折叠块的使用（添加了一个按钮）

import type { CollapseProps } from 'antd';
import { Collapse, Button } from 'antd';

const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`;

const items: CollapseProps['items'] = [
  {
    key: '1',
    label: <div><span>This is panel header 1</span><Button 
      onClick={(e) => {
        if(e.preventDefault) {
          e.preventDefault()
        }
        
        console.log(e)
        console.log('123')
      }}
    >您好</Button></div>,
    children: <p>{text}</p>,
  },
  {
    key: '2',
    label: 'This is panel header 2',
    children: <p>{text}</p>,
  },
  {
    key: '3',
    label: 'This is panel header 3',
    children: <p>{text}</p>,
  },
];

const TestComp: React.FC = () => {
  const onChange = (key: string | string[]) => {
    console.log(key);
  };

  return <Collapse items={items} defaultActiveKey={['1']} onChange={onChange} />;
};

export default TestComp;

基于此折叠款，我加了一个按钮，但是现在有一个需求就是点击折叠块上面的header可以折叠，但是我不想点击button它也折叠。我尝试了用：

if(e.preventDefault) {
  e.preventDefault()
}

但是并不生效。

Answer 1

<Button 
  onClick={(e) => {
    e.stopPropagation();  // 阻止事件冒泡
    console.log('Button clicked');
  }}
>
  您好
</Button>

Answer 2

你应该停止事件冒泡，而不是阻止默认事件。

stopPropagation 和 preventDefault 咋还搞混了？

Answer 3

注入灵魂代码 e.stopPropagation();
e.preventDefault() 来阻止按钮点击的默认行为。这样可以确保按钮点击时不会触发默认行为，而只会触发你自定义的按钮点击逻辑、你把阻止冒泡弄混了