由于 Prop，模态未激活

Question

我在通过从 class 组件内部传递切换模态方法来激活模态时遇到一些问题。我有我的导航栏作为我的功能组件和底部 class 组件中的状态。看起来它们已连接，但 onClick 似乎没有激活我的模式。有谁能帮我看看发生了什么事？我认为将方法与状态绑定将使它可以访问并作为道具传递，因此我认为下面的 onClick={props.modal.toggleModal 会将状态更改为“true”?

function NavigationBar(props){
    return(
        <React.Fragment>
            
            <Navbar dark sticky="top" expand="md">
                <div className="container">
                    <NavbarBrand className="mr-auto"><img src="../images/compLogo.jpg" width="30" height="30" alt="company logo"/></NavbarBrand>
                    <NavbarToggler />
                    <Collapse navbar>
                        <Nav navbar>
                      

                        
                            <Button className="nav-link buttonModal" onClick={props.modal.toggleModal}>
                                 <i className="fa fa-address-book fa-lg" /> Contact Us
                            </Button>
                            
                        
                        </Nav>
                    </Collapse>
                </div>
            </Navbar>


           <--Modal-->

            <Modal isOpen={props.modal.isModalOpen} toggle={props.modal.toggleModal}>
                <ModalBody>
                    <Form>
                        <FormGroup>
                            <Label htmlFor="name">Name</Label>
                            <Input type="text" />
                        </FormGroup>
                    </Form>
                </ModalBody>
            </Modal>
            
        </React.Fragment>
    )
}

class Header extends Component {
    constructor(props){
        super(props);
            this.state={
                isModalOpen: false
            }
            
            this.toggleModal = this.toggleModal.bind(this);
        }

    toggleModal(){
        this.setState({isModalOpen: !this.state.isModalOpen})
    }

    render(){
        return(
            <NavigationBar modal={this.state}/>
        )
    }
}

export default Header;

Answer 1

只有状态被传递给模态

<NavigationBar modal={this.state}/>

但是您应该同时传递 isModalOpen 状态和 toggleModal 回调。我建议单独传递它们以提高可读性和维护性。

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isModalOpen: false
    };

    this.toggleModal = this.toggleModal.bind(this);
  }

  toggleModal() {
    this.setState({ isModalOpen: !this.state.isModalOpen });
  }

  render() {
    return (
      <NavigationBar
        isModalOpen={this.state.isModalOpen}
        toggleModal={this.toggleModal}
      />
    );
  }
}

模态

function NavigationBar(props) {
  return (
    <React.Fragment>
      <Navbar dark sticky="top" expand="md">
        <div className="container">
          <NavbarBrand className="mr-auto">
            <img
              src="../images/compLogo.jpg"
              width="30"
              height="30"
              alt="company logo"
            />
          </NavbarBrand>
          <NavbarToggler />
          <Collapse navbar>
            <Nav navbar>
              <Button
                className="nav-link buttonModal"
                onClick={props.toggleModal} // <-- access props.toggleModal
              >
                <i className="fa fa-address-book fa-lg" /> Contact Us
              </Button>
            </Nav>
          </Collapse>
        </div>
      </Navbar>

      <Modal
        isOpen={props.isModalOpen} // <-- access props.isModalOpen
        toggle={props.toggleModal} // <-- access props.toggleModal
      >
        <ModalBody>
          <Form>
            <FormGroup>
              <Label htmlFor="name">Name</Label>
              <Input type="text" />
            </FormGroup>
          </Form>
        </ModalBody>
      </Modal>
    </React.Fragment>
  );
}

由于 Prop，模态未激活

Modal not activating due to Prop

javascript

reactjs

react-modal