ReactJS-在onclick事件上渲染模态组件
我试图将ReactStrap Modal添加到我的NavBar但无法找到它的解决方案 . 我创建了一个处理函数,它将在click事件中调用,但我无法在此处理函数上调用我的登录组件 . 我还将处理程序绑定到当前DOM . 我所做的只是简单地称为登录组件,它不起作用 . 请解释如何调用此父组件的组件
代码: login.js
import React from 'react';
import {
Button,
Form,
FormGroup,
// FormText,
Label,
Input,
Modal,
ModalHeader,
ModalBody,
ModalFooter
} from 'reactstrap';
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal
});
}
render() {
return (
<div>
<Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button>
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle}>Login</ModalHeader>
<ModalBody>
<Form>
<FormGroup>
<Label for="Email">Email</Label>
<Input type="email" name="email" id="email" placeholder=""/>
</FormGroup>
<FormGroup>
<Label for="password">Password</Label>
<Input type="password" name="password" id="password" placeholder=""/>
</FormGroup>
</Form>
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggle}>Submit</Button>{' '}
<Button color="secondary" onClick={this.toggle}>Cancel</Button>
</ModalFooter>
</Modal>
</div>
);
}
}
export default Login;
NavBar.js:
import React from 'react';
import Login from './login/login';
import {
Navbar,
NavbarBrand,
NavbarToggler,
Nav,
NavItem,
NavLink,
Collapse,
UncontrolledDropdown,
DropdownMenu,
DropdownItem,
DropdownToggle
} from 'reactstrap';
class NavbarComponent extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false
};
this.handleClick = this.handleClick.bind(this);
**this.setState={
isloggedOn: true
}**
}
stickyNavbar() {
var Navbar = document.getElementById("Navbar");
console.log(Navbar);
var sticky = Navbar.offsetTop;
if (window.pageYOffset >= sticky) {
Navbar.classList.add("sticky")
} else {
Navbar.classList.remove("sticky");
}
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
handleClick() {
**if(this.isloggedOn) {
return <Login/>;
}**
}
render() {
return (
<div>
<Navbar color="dark" light expand="md">
<NavbarBrand href="/">found-Missing</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<DropdownMenu right>
<DropdownItem onClick= {this.handleClick}>
Login
</DropdownItem>
<DropdownItem href="https://github.com/reactstrap/reactstrap">
Signup
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
Reset
</DropdownItem>
</DropdownMenu>
</Navbar>
</div>
)
}
}
export default NavbarComponent;
回答(2)
您的代码有一些问题 .
-
NavBarComponent
中的isLoggedOn
应该位于该州 . 你把它放在了setState
. -
您的
handleClick
方法正在返回反应组件 . 这个不对 . 它应该只是处理切换状态 . -
正如其他人所说,你需要使用conditional rendering . 通过所有这些更改,您的
NavBarComponent
应如下所示:
import React from 'react';
import Login from './login/login';
import {
Navbar,
NavbarBrand,
NavbarToggler,
Nav,
NavItem,
NavLink,
Collapse,
UncontrolledDropdown,
DropdownMenu,
DropdownItem,
DropdownToggle
} from 'reactstrap';
class NavbarComponent extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false,
isLoggedOn: false
};
this.handleClick = this.handleClick.bind(this);
}
stickyNavbar() {
var Navbar = document.getElementById("Navbar");
console.log(Navbar);
var sticky = Navbar.offsetTop;
if (window.pageYOffset >= sticky) {
Navbar.classList.add("sticky")
} else {
Navbar.classList.remove("sticky");
}
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
handleClick() {
this.setState({ isLoggedOn: true })
}
render() {
return (
<div>
<Navbar color="dark" light expand="md">
<NavbarBrand href="/">found-Missing</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
{this.state.isLoggedOn ? <div>User successfully logged in!!</div> : (
<DropdownMenu right>
<DropdownItem onClick= {this.handleClick}>
Login
</DropdownItem>
<DropdownItem href="https://github.com/reactstrap/reactstrap">
Signup
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
Reset
</DropdownItem>
</DropdownMenu>
)}
</Navbar>
</div>
)
}
}
export default NavbarComponent;
2 years ago
如果您想在NavBar中触发模态,只需在
login.js
状态下添加prop
到<NavBar />
即可切换modal
.