reactstrap模式无法正常运行，必须将其取消两次

Question

我有一个下拉菜单，并且在菜单内部有一个选项Load Plan，选择此选项后，将出现一个模态。实施后，模态会在单击“加载计划”选项时出现，但是在取消模态时，模态会消失，但会再次出现。当您第二次单击取消时，它将永久关闭。当我尝试在模式中也使用文件上载器选项时，也会发生相同的功能。单击上传按钮后，当我选择文件时，文件浏览器将打开，文件浏览器将关闭，但除非再次进行操作，否则不会注册到模式。

这里是包含下拉菜单的导航栏：

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

之所以发生这种情况，是因为存在“不受控制的降落”组件。当您切换模态时，下拉菜单仍处于打开状态，并且当您单击模态时，该下拉列表将关闭，强制每个孩子进行更新。而且，模态是该下拉菜单的子代，所以您要做的是。在打开模态或将模态置于更全局的范围之前，使其受控并关闭。像这样：

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'的子代，而不是'DropdownItem'。