在与react-bootstrap反应中未显示模态 [英] Modal not showing up in react with react-bootstrap
问题描述
我正在尝试创建一种模式，以在单击NavBar.Item登录/注册时弹出登录/注册.
I am trying to create a modal to have a login/register pop-up when clicking on the NavBar.Item Login/Register.
我的模态定义如下:
import React from "react";
import '../assets/styles/GenericTheme.css'
import { Modal } from "react-bootstrap";
class LoginRegisterModal extends React.Component {
constructor(props, context) {
super(props);
this.state = {show: false};
}
open = () => {
this.setState({show: true});
}
close = () => {
this.setState({show: false});
}
render() {
return (
// <Modal show={this.state.show} onHide={this.close} dialogClassName="popup-inner">
<Modal show={this.state.show} fade={false} style={{width: "200px", display: "block"}}>
<Modal.Body>test</Modal.Body>
</Modal>
);
}
}
export default LoginRegisterModal;
在NavBar中，我已将对Modal的引用添加如下:
In the NavBar, I have added the reference to the Modal as below:
import React, {} from 'react';
import { Navbar, Nav, NavDropdown } from 'react-bootstrap';
import SearchForm from '../HeaderFooter/SearchForm';
import SiteLogo from '../../assets/images/village-logo.svg';
import '../../assets/styles/HeaderTheme.css'
import LoginRegisterModal from '../LoginRegisterModal';
class NavHeader extends React.Component {
constructor(props, context) {
super(props);
this.state = {showLogin: false};
}
openLogin = () => {
this.setState({showLogin: !this.state.showLogin});
}
render() {
return (
<div>
<Navbar className="village-header" width="100" expand="lg">
<Navbar.Brand href="/">
<img
src= { SiteLogo }
width="214"
height="28"
className="d-inline-block align-top"
alt="Village"
/>
</Navbar.Brand>
<SearchForm />
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto village-header">
<Nav.Link href="/discover">Discover</Nav.Link>
<Nav.Link href="/create">Create</Nav.Link>
<Nav.Link href="/howitworks">How it Works</Nav.Link>
<Nav.Link ref="LoginRegisterModal" eventKey={1} href="#" onClick={this.openLogin}>Login/Register</Nav.Link>
<NavDropdown title="Profile" id="basic-nav-dropdown">
<NavDropdown.Item>Firstname LastName</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="/profile">Profile</NavDropdown.Item>
<NavDropdown.Item href="/messages">Messages</NavDropdown.Item>
<NavDropdown.Item href="/settings">Settings</NavDropdown.Item>
<NavDropdown.Item href="/logout">Logout</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
<LoginRegisterModal show={this.state.showLogin} />
</div>
);
}
}
export default NavHeader;
当我单击登录/注册"时:
When I click on the Login/Register:
<Nav.Link ref="LoginRegisterModal" eventKey={1} href="#" onClick={this.openLogin}>Login/Register</Nav.Link>
什么也没有发生，没有弹出窗口或模式显示.另外，我还在NavBar中添加了以下行
nothing happens, no pop-up or modal is shown. Also I have added the line below in the NavBar
<LoginRegisterModal show={this.state.showLogin} />，但无变化.我还尝试通过添加className并将z-layer强制设置为2，但效果不佳.
<LoginRegisterModal show={this.state.showLogin} /> but nothin change. I tried also by adding a className and forcing the z-layer to 2 but it's not working as well.
有什么想法吗? 问候
推荐答案
您的模式组件不会侦听"任何通过的道具，即从NavHeader传递的show道具.一个快速的肮脏就是实现componentDidUpdate生命周期功能，以检查show道具值的变化.在安装后显示为打开的情况下，还可以使用show道具值设置初始状态.
Your modal component isn't "listening" for any passed props, i.e. the show prop being passed from NavHeader. A quick dirty would be to implement the componentDidUpdate lifecycle function to check for the show prop value change. Also use the show prop value to set initial state in the case it's displayed open upon mounting.
class LoginRegisterModal extends React.Component {
constructor(props, context) {
super(props);
this.state = {
show: props.show, // use the initial show value
};
}
open = () => {
this.setState({ show: true });
}
close = () => {
this.setState({ show: false });
}
componentDidUpdate(prevProps) {
const { show } = this.props;
if (prevProps.show !== show) {
if (show) {
open(); // open if parent says to
} else {
close(); // close if parent says to
}
}
}
render() {
return (
// <Modal
// show={this.state.show}
// onHide={this.close}
// dialogClassName="popup-inner"
// >
<Modal
show={this.state.show}
fade={false}
style={{width: "200px", display: "block"}}
>
<Modal.Body>test</Modal.Body>
</Modal>
);
}
}
这允许父级切换模态的显示状态，但是如果模态是从内部关闭/关闭的，那该怎么办.您可能需要某种方法来发信号通知NavHeader模态已关闭，以便它可以同步"其状态. onHide道具可以做到这一点，并且您已将其注释掉了.我建议还向LoginRegisterModal API公开onHide道具.
This allows the parent to to toggle the modal's display state, but what if the modal is closed/dismissed from within. You may want some way to signal back out to the NavHeader that the modal was closed so it can "sync" its state. The onHide prop does that, and you have it commented out. I suggest also exposing out to the LoginRegisterModal API an onHide prop.
close = () => {
this.setState({show: false});
this.props.onHide();
}
父母如此使用
<LoginRegisterModal
show={this.state.showLogin}
onHide={() => this.setState({ showLogin: false })}
/>
但是，这会创建代码重复.将LoginRegisterModal设为受控组件，然后简单地将从NavHeader传递的show和onHide道具传递给LoginRegisterModal的内部Modal组件，可能是一个更好的设计.
This however, creates code duplication. It may be a better design to make LoginRegisterModal a controlled component and simply pass the show and onHide props passed from NavHeader to the internal Modal component of LoginRegisterModal.
const LoginRegisterModal = props => (
<Modal
// pass props on through to Modal
{...props}
// set any props here that you don't want "overridable" by passed props
fade={false}
style={{ width: "200px", display: "block" }}
>
<Modal.Body>test</Modal.Body>
</Modal>
);
这篇关于在与react-bootstrap反应中未显示模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
