前端 - 请问如何进行使用添加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

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

Answer 2

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

stopPropagation 和 preventDefault 咋还搞混了？

Answer 3

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

Answer 4

根据您描述的情况，您想实现点击折叠块的label时触发折叠事件，但点击Button时不触发折叠事件。目前您尝试使用e.preventDefault()来阻止事件触发，但未成功。以下是解决方案：

在使用antd的Collapse组件时，我们可以使用自定义的label来代替默认的字符串label。为了实现您的需求，您可以使用一个包含Button和span的div作为label，并分别为它们绑定事件。通过在Button的点击事件中调用e.stopPropagation()来阻止事件冒泡，从而避免触发折叠事件。更新后的代码如下所示：

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) => {            e.stopPropagation(); // 阻止事件冒泡            console.log('您好');          }}        >          您好        </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;

通过在Button的点击事件中调用e.stopPropagation()，您可以阻止事件冒泡，从而避免触发折叠事件。希望这样能帮助到您！