javascript - ReactJS- 在 onclick 事件上渲染模态组件

问题描述

我正在尝试将 ReactStrap Modal 添加到我的 NavBar 但找不到解决方案。我创建了一个处理函数，它将在单击事件时调用，但我无法在此处理函数上调用我的登录组件。我还将处理程序绑定到当前 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;

导航栏.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;

标签： javascriptreactjsreactstrap

javascript - ReactJS- 在 onclick 事件上渲染模态组件

问题描述

解决方案

推荐阅读