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

尝试一下：

# add extra include directories
target_include_directories(
    ./src/main/cpp/include
    ${Tensorflowlite_DIR}/include
)

Answer 2

我想您不想打开折叠的按钮是Primary Button标头中的Panel，为此您必须手动控制activeKey，并在用户单击时进行检查他们在面板标题上单击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进行演示

Answer 3

如果要在面板内放置按钮，则按钮代码应在面板内，而不是其标签内。.代替：

<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>

我怎样才能使按钮崩溃？

3 个答案: