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

Question

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

Modal.js（我用的是antd design）

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;

我正在努力解决这个问题problem.TT我正在努力解决这个问题.....

Answer 1

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

在您的问题中，在 Header.js 中创建一个状态以维持模态框的 open/visible 状态，并相应地在 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;

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

React button onClick event call other component

buttonclick

reactjs

react-functional-component