reactstrap 模态不能正常工作必须取消它两次

Question

我有一个下拉菜单，在菜单中有一个加载计划选项，当这个选项被 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;

如有任何帮助，我们将不胜感激！

Answer 1

发生这种情况是因为 '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'。

reactstrap 模态不能正常工作必须取消它两次

reactstrap modal not working properly have to cancel it twice

javascript

reactjs

react-modal

reactstrap