Reactjs 单击事件调用其他组件时的反应按钮

我想单击按钮，然后显示模式事件 但该代码未显示模态和无反应
所以我尝试添加代码

{（）=>BtnModal（）}

arrow函数，但没有相同的反应。 我搜索了另一个解决方案

这个

keyworld添加，但是这个keyworld没有使用功能组件。 我怎样才能解决这个问题

Modal.js（我使用了antd设计）

从“antd”导入{Modal}；
函数BtnModal（）{
const[modal2Visible，setModal2Visible]=useState（true）；
返回(
SetModal2可见（假）}
onCancel={（）=>setModal2Visible（false）}
>
知识、权利和义务都属于精英阶层。合理分配权利。

准快速眼动下的新盲肠尊严，

除此之外，所有的一切都是真实的吗

);
};
导出默认BtnModal；

Header.js

import BtnModal from './BtnModal';

function Header() {
  return (
    <>
    <div className="Head-wrap">
      <span>Header</span>
    </div>
    <div className="btn-list">
      <button onClick={BtnModal}>TestBtn</button>
    </div>
  </>
  );
};

export default Header;

从“/BtnModal”导入BtnModal；
函数头（）{
返回(
标题
测试BTN
);
};
导出默认标题；

---

我正在尝试解决这个问题。TT我正在尝试解决这个问题….

首先，您不能单击按钮调用组件。而是根据状态值设置状态并有条件地呈现组件，并在需要呈现组件时设置状态

在您的问题中，在

Header.js

中创建一个状态以保持模态的打开/可见状态，并在

按钮的
onClick
上相应地设置该状态。然后将该状态作为道具传递给
BtnModal
，然后将该道具值分配给
Modal
的
visible
道具

Modal.js

import { Modal } from 'antd';

function BtnModal({visible, onCancel, onOk}){
  return (
    <>
      <Modal
        title="Modal"
        centered
        visible={visible}
        onOk={onOk}
        onCancel={onCancel}
      >
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed dolorem ratione qui iste.<br />
      Dignissimos nisi sint rerum numquam obcaecati voluptatem quidem, quasi rem,<br />
      veritatis voluptatum omnis excepturi, fugit quia harum?</p>
      </Modal>
    </>
  );
};

export default BtnModal;

import BtnModal from './BtnModal';

function Header() {
  const [modal2Visible,setModal2Visible]=useState(true);

  const handleModalOpen = () =>{
    setModal2Visible(true)
  }
  
  const handleCancel = () =>{
    setModal2Visible(false)
  }
  const handleOk = () =>{
    setModal2Visible(false)
  }

  return (
    <>
    <div className="Head-wrap">
      <span>Header</span>
    </div>
    <div className="btn-list">
      <button onClick={handleModalOpen}>TestBtn</button>
      <BtnModal visible={modal2Visible} onCancel={handleCancel} onOk={handleOk}/>
    </div>
  </>
  );
};

export default Header;

从“antd”导入{Modal}；
函数BtnModal（{visible，onCancel，onOk}）{
返回(
知识、权利和义务都属于精英阶层。合理分配权利。

准快速眼动下的新盲肠尊严，

除此之外，所有的一切都是真实的吗

);
};
导出默认BtnModal；

Header.js

import { Modal } from 'antd';

function BtnModal({visible, onCancel, onOk}){
  return (
    <>
      <Modal
        title="Modal"
        centered
        visible={visible}
        onOk={onOk}
        onCancel={onCancel}
      >
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed dolorem ratione qui iste.<br />
      Dignissimos nisi sint rerum numquam obcaecati voluptatem quidem, quasi rem,<br />
      veritatis voluptatum omnis excepturi, fugit quia harum?</p>
      </Modal>
    </>
  );
};

export default BtnModal;

import BtnModal from './BtnModal';

function Header() {
  const [modal2Visible,setModal2Visible]=useState(true);

  const handleModalOpen = () =>{
    setModal2Visible(true)
  }
  
  const handleCancel = () =>{
    setModal2Visible(false)
  }
  const handleOk = () =>{
    setModal2Visible(false)
  }

  return (
    <>
    <div className="Head-wrap">
      <span>Header</span>
    </div>
    <div className="btn-list">
      <button onClick={handleModalOpen}>TestBtn</button>
      <BtnModal visible={modal2Visible} onCancel={handleCancel} onOk={handleOk}/>
    </div>
  </>
  );
};

export default Header;

从“/BtnModal”导入BtnModal；
函数头（）{
const[modal2Visible，setModal2Visible]=useState（true）；
常量handleModalOpen=（）=>{
SetModal2可见（真）
}
常量handleCancel=（）=>{
SetModal2可见（假）
}
常量handleOk=（）=>{
SetModal2可见（假）
}
返回(
标题
测试BTN
);
};
导出默认标题；
Wow-Thx！！我成功点击按钮打开模式！顺便说一下，模态组件是我尝试使用它的全局和可重用组件。可能是调用模式组件中的另一个组件，然后
打开
取消
确定
始终使用相同的函数声明？我无法完全理解您的问题。但据我所知，您不需要传递所有函数，然后将它们添加到全局组件中。相反，您可以像这样在
BtnModal
中传播道具，
lorem
。在这种情况下，不需要手动添加函数。