我怎样才能把一个按钮折叠起来？

Question

我想将一个按钮放入折叠中，我正在使用 antd 的折叠，那个新按钮不应该打开或关闭折叠，我想给她其他功能吗？

const {  Collapse, Button  } = antd;
const { Panel } = Collapse;

function callback(key) {
  console.log(key);
}

const text = ` hi `;

ReactDOM.render(
  <Collapse 

  defaultActiveKey={['1']} onChange={callback}>
    <Panel header={<Button type="primary">Primary Button</Button>} key="1" >
    <Button type="link">My button</Button>  > 
      <p>{text}</p>
    </Panel>
  </Collapse>,
  mountNode,
);

为什么单击按钮时会打开 COLLAPSE？我不想打开 COLLAPSE

Answer 1

如果你想要一个面板内的按钮，按钮代码应该在面板内，而不是在它的标签内..而不是：

<Panel header="This is panel header 1" key="1" 
<Button type="link">My button</Button>  > 

  <p>{text}</p>
</Panel>

这应该是

<Panel header="This is panel header 1" key="1">
    <Button type="link">My button</Button>
    <p>{text}</p>
</Panel>

Answer 2

试试这个：

const {  Collapse, Button  } = antd;
const { Panel } = Collapse;

function callback(key) {
  console.log(key);
}

const text = ` hi `;

ReactDOM.render(
  <Collapse  defaultActiveKey={['1']} onChange={callback}>
    <Panel header={<Button type="primary">Primary Button</Button>} key="1" > 
       <Button type="link">My button</Button> 
      <p>{text}</p>
    </Panel>
  </Collapse>,
  mountNode,
);

Answer 3

我猜你想要不打开折叠的按钮是 Panel 的 header 中的 Primary Button，为此你必须手动控制 activeKey，并检查当用户点击面板 header 时，他们点击的是 Primary Button 还是面板之外。

试试这个：

import React, { useState, useRef } from "react";
import * as antd from "antd";

const { Collapse, Button } = antd;
const { Panel } = Collapse;

const text = ` hi `;
export const App = () => {
  const [activeKey, setActiveKey] = useState(0);
  const isButtonClicked = useRef(false);

  const callback = key => {
    console.log(key, isButtonClicked.current);
    // Check if use click on the button don not update activekey
    if (
      isButtonClicked &&
      isButtonClicked.current &&
      isButtonClicked.current === true
    ) {
      isButtonClicked.current = false;
      return;
    }

    if (!activeKey) {
      setActiveKey(key);
    } else {
      setActiveKey(0);
    }
  };
  return (
    <Collapse activeKey={activeKey} onChange={callback}>
      <Panel
        header={
          <Button
            onClick={() => {
              // set the isButtonClicked ref to tru when user click on Button
              isButtonClicked.current = true;
              // Do other functionality you want for this button here
            }}
            type="primary"
          >
            Primary Button
          </Button>
        }
        key="1"
      >
        <Button type="link">My button</Button> ><p>{text}</p>
      </Panel>
    </Collapse>
  );
};

我创建一个codesandbox来演示它

我怎样才能把一个按钮折叠起来？

How can I put a button into collapse?

reactjs

antd

collapse