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

loading...


1

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

NavBar.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;

loading...

2回答

  • 0

    如果您想在NavBar中触发模态,只需在 login.js 状态下添加 prop<NavBar /> 即可切换 modal .


  • 0

    您的代码有一些问题 .

    • NavBarComponent 中的 isLoggedOn 应该位于该州 . 你把它放在了 setState .

    • 您的 handleClick 方法正在返回反应组件 . 这个不对 . 它应该只是处理切换状态 .

    • 正如其他人所说,你需要使用conditional rendering . 通过所有这些更改,您的 NavBarComponent 应如下所示:

    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,
                isLoggedOn: false
    
            };
            this.handleClick = this.handleClick.bind(this);
        }
    
        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() {
          this.setState({ isLoggedOn: true })
        }
    
        render() {
            return (
                <div>
                    <Navbar color="dark" light expand="md">
                        <NavbarBrand href="/">found-Missing</NavbarBrand>
                        <NavbarToggler onClick={this.toggle} />
                        {this.state.isLoggedOn ? <div>User successfully logged in!!</div> : (
                            <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;
    
评论

暂时没有评论!