Question

我正在尝试将ReactStrap Modal添加到我的NavBar中，但是找不到解决方案。我创建了一个处理程序函数，该事件将在单击事件时调用，但无法在此处理函数上调用我的登录组件。我还将处理程序绑定到当前DOM。我所做的只是简单地称为“登录组件”，它无法正常工作。请说明如何从该父组件调用组件

代码： login.js

KnownWords.findOne({words:req.params.w_id})
.populate('words',['name','meaning','synonyms','sentence'])

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

Answer 1

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

Answer 2

您的代码有些错误。

您的isLoggedOn中的NavBarComponent应该处于该状态。您已将其放在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方法并更改当前状态，并将当前状态返回给父组件。

现在当前状态为false，再次，Parent组件将调用具有新状态的登录组件，即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;

在onclick事件上提供ReactJS-渲染模式组件

3 个答案: