reactstrap 模态不能正常工作必须取消它两次
reactstrap modal not working properly have to cancel it twice
我有一个下拉菜单,在菜单中有一个加载计划选项,当这个选项被 selected 时,应该会出现一个模式。在实施时,当单击“加载计划”选项时,模态会出现,但是当您取消模态时,它会消失但会再次出现。当您第二次点击取消时,它会永久消失。当我尝试在模式上使用文件上传器选项时,也会发生相同的功能。单击上传按钮后,文件浏览器在我 select 文件时打开,文件浏览器关闭但不会注册到模式,除非我第二次这样做。
这是包含下拉菜单的导航栏:
import React, {Component} from "react";
import {Navbar, NavbarBrand, Nav,
NavItem, DropdownToggle,
Dropdown, DropdownMenu,
DropdownItem,
UncontrolledDropdown, Row, Col,
Container, Input} from "reactstrap";
import PlanModal from './loadModal';
class Topbar extends Component {
constructor(props){
super(props);
this.state = {
dropdownOpen: false,
f_settings: true,
f_help: true,
isModalOpen: false
};
this.showModal = this.showModal.bind(this);
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
isModalOpen: !this.state.isModalOpen
})
}
showModal() {
this.setState({
isModalOpen:true
})
}
render() {
return (
<Container fluid={true}>
<Navbar color="light" light expand="md">
<Row>
<NavbarBrand> Raytheon<NavbarBrand>
<Nav navbar>
<Col xs="8">
<UncontrolledDropdown>
<DropdownToggle nav caret>
File
</DropdownToggle>
<DropdownMenu right>
<DropdownItem onClick={this.changeValue}>
File
</DropdownItem>
<PlanModal isOpen={this.state.isModalOpen} toggle={this.toggle}/>
</DropdownMenu>
</UncontrolledDropdown>
</Col>
</Row>
</Navbar>
</Container>
)
}
}
这是模态组件
class PlanModal extends Component{
constructor(props){
super(props);
this.state = {
selectedFile: null
};
}
handleFile(e) {
e.stopPropagation();
this.setState({
selectedFile: event.target.files[0]
})
}
uploadFile(file) {
...
}
render() {
return(
<div>
<Button color="transparent" onClick={this.props.toggle}>Load Plan</Button>
<Modal isOpen={this.props.isOpen}>
<ModalHeader toggle={this.props.toggle}>Nav Plan</ModalHeader>
<ModalBody>
File In use:
<Input type="file" id= "file" onChange={e=>this.handleFile(e)/>
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={file=> this.uploadFile(file)}>Run</Button>
<Button color="secondary" onClick={this.props.toggle}>Cancel</Button>
</ModalFooter>
</Modal
</div>
)
}
}
export default PlanModal;
如有任何帮助,我们将不胜感激!
发生这种情况是因为 'UncontrolledDropdown' 组件。当您切换模态时,下拉菜单仍然打开,当您点击模态时,下拉菜单关闭并强制每个 child 更新。嗯,模态是那个下拉列表的 child,所以你要做的是。在打开模式之前控制并关闭它,或者将模式放在更全局的范围内。像这样:
import React, { Component } from "react";
import {
Navbar,
Button,
NavbarBrand,
Nav,
NavItem,
DropdownToggle,
Dropdown,
DropdownMenu,
DropdownItem,
UncontrolledDropdown,
Row,
Col,
Container,
Input
} from "reactstrap";
import PlanModal from "./Plan";
export default class Topbar extends Component {
constructor(props) {
super(props);
this.state = {
dropdownOpen: false,
f_settings: true,
f_help: true,
isModalOpen: false
};
this.showModal = this.showModal.bind(this);
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState(
{
isModalOpen: !this.state.isModalOpen
},
() => {
console.log(this.state.isModalOpen);
}
);
}
showModal() {
this.setState({
isModalOpen: true
});
}
changeValue() {}
render() {
return (
<Container fluid={true}>
<Navbar color="light" light expand="md">
<Row>
<NavbarBrand> Raytheon</NavbarBrand>
<Nav navbar>
<Col xs="8">
<UncontrolledDropdown>
<DropdownToggle nav caret>
File
</DropdownToggle>
<DropdownMenu right>
<DropdownItem onClick={this.changeValue}>File</DropdownItem>
<Button color="transparent" onClick={this.toggle}>
Load Plan
</Button>
</DropdownMenu>
</UncontrolledDropdown>
</Col>
</Nav>
</Row>
</Navbar>
<PlanModal isOpen={this.state.isModalOpen} toggle={this.toggle} />
</Container>
);
}
}
我将按钮从组件中取出,并将模式设置为 'Container' 的 child 而不是 'DropdownItem'。
我有一个下拉菜单,在菜单中有一个加载计划选项,当这个选项被 selected 时,应该会出现一个模式。在实施时,当单击“加载计划”选项时,模态会出现,但是当您取消模态时,它会消失但会再次出现。当您第二次点击取消时,它会永久消失。当我尝试在模式上使用文件上传器选项时,也会发生相同的功能。单击上传按钮后,文件浏览器在我 select 文件时打开,文件浏览器关闭但不会注册到模式,除非我第二次这样做。
这是包含下拉菜单的导航栏:
import React, {Component} from "react";
import {Navbar, NavbarBrand, Nav,
NavItem, DropdownToggle,
Dropdown, DropdownMenu,
DropdownItem,
UncontrolledDropdown, Row, Col,
Container, Input} from "reactstrap";
import PlanModal from './loadModal';
class Topbar extends Component {
constructor(props){
super(props);
this.state = {
dropdownOpen: false,
f_settings: true,
f_help: true,
isModalOpen: false
};
this.showModal = this.showModal.bind(this);
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
isModalOpen: !this.state.isModalOpen
})
}
showModal() {
this.setState({
isModalOpen:true
})
}
render() {
return (
<Container fluid={true}>
<Navbar color="light" light expand="md">
<Row>
<NavbarBrand> Raytheon<NavbarBrand>
<Nav navbar>
<Col xs="8">
<UncontrolledDropdown>
<DropdownToggle nav caret>
File
</DropdownToggle>
<DropdownMenu right>
<DropdownItem onClick={this.changeValue}>
File
</DropdownItem>
<PlanModal isOpen={this.state.isModalOpen} toggle={this.toggle}/>
</DropdownMenu>
</UncontrolledDropdown>
</Col>
</Row>
</Navbar>
</Container>
)
}
}
这是模态组件
class PlanModal extends Component{
constructor(props){
super(props);
this.state = {
selectedFile: null
};
}
handleFile(e) {
e.stopPropagation();
this.setState({
selectedFile: event.target.files[0]
})
}
uploadFile(file) {
...
}
render() {
return(
<div>
<Button color="transparent" onClick={this.props.toggle}>Load Plan</Button>
<Modal isOpen={this.props.isOpen}>
<ModalHeader toggle={this.props.toggle}>Nav Plan</ModalHeader>
<ModalBody>
File In use:
<Input type="file" id= "file" onChange={e=>this.handleFile(e)/>
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={file=> this.uploadFile(file)}>Run</Button>
<Button color="secondary" onClick={this.props.toggle}>Cancel</Button>
</ModalFooter>
</Modal
</div>
)
}
}
export default PlanModal;
如有任何帮助,我们将不胜感激!
发生这种情况是因为 'UncontrolledDropdown' 组件。当您切换模态时,下拉菜单仍然打开,当您点击模态时,下拉菜单关闭并强制每个 child 更新。嗯,模态是那个下拉列表的 child,所以你要做的是。在打开模式之前控制并关闭它,或者将模式放在更全局的范围内。像这样:
import React, { Component } from "react";
import {
Navbar,
Button,
NavbarBrand,
Nav,
NavItem,
DropdownToggle,
Dropdown,
DropdownMenu,
DropdownItem,
UncontrolledDropdown,
Row,
Col,
Container,
Input
} from "reactstrap";
import PlanModal from "./Plan";
export default class Topbar extends Component {
constructor(props) {
super(props);
this.state = {
dropdownOpen: false,
f_settings: true,
f_help: true,
isModalOpen: false
};
this.showModal = this.showModal.bind(this);
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState(
{
isModalOpen: !this.state.isModalOpen
},
() => {
console.log(this.state.isModalOpen);
}
);
}
showModal() {
this.setState({
isModalOpen: true
});
}
changeValue() {}
render() {
return (
<Container fluid={true}>
<Navbar color="light" light expand="md">
<Row>
<NavbarBrand> Raytheon</NavbarBrand>
<Nav navbar>
<Col xs="8">
<UncontrolledDropdown>
<DropdownToggle nav caret>
File
</DropdownToggle>
<DropdownMenu right>
<DropdownItem onClick={this.changeValue}>File</DropdownItem>
<Button color="transparent" onClick={this.toggle}>
Load Plan
</Button>
</DropdownMenu>
</UncontrolledDropdown>
</Col>
</Nav>
</Row>
</Navbar>
<PlanModal isOpen={this.state.isModalOpen} toggle={this.toggle} />
</Container>
);
}
}
我将按钮从组件中取出,并将模式设置为 'Container' 的 child 而不是 'DropdownItem'。