React 按钮 onClick 事件调用其他组件

Question

我想点击按钮然后显示模态事件 但是这段代码没有显示模态，也没有反应
所以我尝试添加代码{()=>BtnModal()}arrowfunction，但同样没有反应。 我搜索了其他解决方案this keyworld add，但是这个keyworld没有使用功能组件。 我该如何解决这个问题？

Modal.js（我用过antd设计）

import { Modal } from 'antd';

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

  return (
    <>
      <Modal
        title="Modal"
        centered
        visible={modal2Visible}
        onOk={() => setModal2Visible(false)}
        onCancel={() => setModal2Visible(false)}
      >
      <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;

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;

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

Answer 1

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

在您的问题中，在 Header.js 中创建一个状态，以维持 Modal 的打开/可见状态，并在 button 的 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;

Header.js

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;