Question

我有如下所示的组件。当我点击＆＃34;登录＆＃34;我想打开React-bootstrap模态弹出窗口。菜单：

export default class Navigation extends Component
{
  render() {
    return (
        <Navbar fixedTop inverse collapseOnSelect className="menu">
            <Navbar.Header>
                <Navbar.Brand>
                        <a href="#"><Image src="Logo.png" alt="Ubibird" responsive/></a> 
                </Navbar.Brand>
                <Navbar.Toggle />
            </Navbar.Header>
            <Navbar.Collapse>
                <Navbar.Form pullLeft>
                    <form>
                        <FormGroup id="search"> 
                            <InputGroup>
                                <InputGroup.Addon className="glysearch"> <Glyphicon glyph="search" /></InputGroup.Addon> 
                                <FormControl type="text" placeholder="Search" />
                            </InputGroup>
                        </FormGroup>
                    </form>
                </Navbar.Form>
                <Nav pullRight>
                    **<NavItem eventKey={1} href="#">Login</NavItem>**
                    <NavItem eventKey={2} href="#">Sign Up</NavItem>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    );
  }
}

Answer 1

您没有说明您的代码中包含哪个Modal组件，因此这是完整的解决方案：

您需要一个单独的组件来呈现Bootstrap模式。代码是：

constructor(props, context) {
  this.state = {show: false};
}

open = () => {
  this.setState({show: true});
}

close = () => {
  this.setState({show: false});
}

render() {
  return (
    <Modal show={this.state.show} onHide={this.close}>
      ...
    </Modal>
  );
}

然后在导航组件中，您需要导入并在某处渲染Modal。然后在按钮处添加一个onClick侦听器处理模态的开头：

openLoginModal = () => {
  this.refs.loginModal.open();
}

render() {
  return (
   ...
   <NavItem ref="loginModal" eventKey={1} href="#" onClick={this.openLoginModal}>Login</NavItem>
   ...
  );
}

React-bootstrap：当我们点击登录菜单时弹出模式打开

1 个答案: