javascript - 如何从钩子中的另一个组件打开模态?
问题描述
在 React 项目中,我需要从另一个组件打开 Modal。我从 StackOverflow 中找到了建议的问题,但还没有被说服。因为我需要使 Modal 组件可在所有组件中重用。请参阅下面的代码以供参考
主页.js
const HomePage = () => {
return (
<>
<button onClick={() => setLoginModalShow(true)}>Open Modal</button>
</>
);
};
我创建了以下文件来导出其他文件,并使其在其他组件中有用
commonLogin.js
import LoginModal from "./LoginModal";
export const setLoginModalShow = (props) => {
console.log("PROPS", props);
return <LoginModal showModal={props} />;
};
这是模态组件
const LoginModal = (props) => {
const [loginModalShow, setLoginModalShow] = useState(props.showModal);
console.log("PROPS in MODAL", props);
return (
<>
<Modal
show={loginModalShow}
onHide={setLoginModalShow}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">Logout</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>Are you sure to Logout?</h4>
</Modal.Body>
<Modal.Footer>
<Button onClick={() => setLoginModalShow(false)}>Cancel</Button>
</Modal.Footer>
</Modal>
</>
);
};
请参考代码沙箱链接:https ://codesandbox.io/s/nameless-cdn-70zuq 。访问页面后,单击“打开模式”按钮
解决方案
您想控制父组件的显示/隐藏
const HomePage = () => {
const [showLogin, setShowLogin] = useState(false);
return (
<>
<button onClick={() => setShowLogin(true)}>Open Modal</button>
<LoginModal show={showLogin} close={() => setShowLogin(false)} />
</>
);
};
<Modal
show={props.show}
cancel={props.close}
...
这是一个工作示例:
推荐阅读
- python - pandas 合并错误“unhashable type: dict”的解决方法
- elasticsearch - 结合弹性搜索的两个查询?
- flutter - 颤振/飞镖更新
- emulation - risc-v c 模拟器是如何工作的?
- anylogic - AnyLogic - 仿真模型文档
- c++ - C++ exp() 函数真的很奇怪
- gradle - 在 gradle 中,如何复制已编译测试类的子集
- tcp - 如果 TCP 用完它的序列号,会发生什么?如果再次为 0,该字节不会被视为重复吗?
- java - 如何在java中对项目进行分组并转换为列表
- python - 为什么我的 django 代码没有向我的新注册用户发送电子邮件?