我正试图创建一个模式,当点击 NavBar.Item
登录注册。
我的模式定义如下。
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中,我添加了模式的引用,如下所示。
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;
当我点击LoginRegister:
<Nav.Link ref="LoginRegisterModal" eventKey={1} href="#" onClick={this.openLogin}>Login/Register</Nav.Link>
什么都没有发生,没有弹出窗口或模式显示。另外,我在导航条中添加了以下一行内容
<LoginRegisterModal show={this.state.showLogin} />
但没有什么变化。我也试过通过添加一个 className
并强行 z-layer
到2,但它不工作,以及。
任何想法?
你的模态组件没有 "监听 "任何通过的道具,即 show
传来 NavHeader
. 一个简单的方法是实现 componentDidUpdate
生命周期函数来检查 show
道具值的变化。也可以使用 show
prop值来设置它在挂载时显示为打开的情况下的初始状态,这使得父节点可以切换模态的显示状态,但如果模态在内部是关闭的呢?
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 an onHide
支持。
close = () => {
this.setState({show: false});
this.props.onHide();
}
父体使用的是这样的
<LoginRegisterModal
show={this.state.showLogin}
onHide={() => this.setState({ showLogin: false })}
/>
但是,这就造成了代码的重复。可能更好的设计是让 LoginRegisterModal
受控组件,只需将 show
和 onHide
传来 NavHeader
对内 Modal
的组成部分 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>
);