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

Question

我正在尝试将 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;

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;

Answer 1

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

Answer 2

您的代码有一些问题。

您 NavBarComponent 中的 isLoggedOn 应该位于该州。您已将其放入 setState.
您的 handleClick 方法正在返回一个 React 组件。这是不对的。它应该只负责切换状态。

正如其他人所说，你需要使用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;

Answer 3

好的，问题已经解决了

我在我的组件中创建了一个状态，并将该状态连同方法（在 onclick 事件上更改当前状态）一起传递给我的组件，组件可以从该方法从父组件访问它。

一旦组件呈现模态，它将调用父组件的 loginmodals 方法并更改当前状态和 return 当前状态到父组件。

现在当前状态为 false，父组件将再次调用具有新状态的登录组件，即 false，Modal 将在其上查看为 false 的状态，因此它将关闭 Modal。

Login.js:

import React from 'react';
import {
    Button,
    Form,
    FormGroup,
    Label,
    Input,
    Modal,
    ModalHeader,
    ModalBody,
    ModalFooter
} from 'reactstrap';

class Login extends React.Component {
    constructor(props) {
        console.log(props);
        super(props);
    }

    render() {
        return (
            <div onClick={this.props.loginmodals}>
              {/* <Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button> */}
              <Modal isOpen={this.props.loginmodal} toggle={this.props.loginmodals} className={this.props.className}>
                <ModalHeader toggle={this.props.loginmodals}>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,
            loginmodal: false,
            signupmodal: false
        };
        this.loginmodals = this.loginmodals.bind(this);
    }

    toggle() {
        this.setState({
            isOpen: !this.state.isOpen
        });
    }

    loginmodals(state) {
      this.setState({
        loginmodal: !this.state.loginmodal,
      });
    }

    render() {
        return (
            <div>
                <Navbar color="" light expand="md">
                <NavbarBrand href="/">found-Missing</NavbarBrand>
                <NavbarToggler onClick={this.toggle} />
                <Collapse isOpen={this.state.isOpen} navbar>
                  <Nav className="ml-auto" navbar>
                    <NavItem>
                      <NavLink href="/components/">About us</NavLink>
                    </NavItem>
                    <NavItem>
                      <NavLink href="https://github.com/reactstrap/reactstrap">How it Works</NavLink>
                    </NavItem>
                    <UncontrolledDropdown nav inNavbar>
                      <DropdownToggle nav caret>
                        login/signup
                      </DropdownToggle>
                      <DropdownMenu right>
                        **<DropdownItem onClick={this.loginmodals}>
                          Login
                          <Login loginmodal={this.state.loginmodal} loginmodals={this.loginmodals}/>
                        </DropdownItem>**
                        <DropdownItem divider />
                        <DropdownItem>
                          Reset
                        </DropdownItem>
                      </DropdownMenu>
                    </UncontrolledDropdown>
                  </Nav>
                </Collapse>
              </Navbar>
            </div>
        )
    }
} 
export default NavbarComponent;

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

ReactJS- render modal component on onclick event

javascript

reactjs

reactstrap