Reactjs 反应引导：当我们点击登录菜单时弹出模式打开

我的组件如下所示。当我点击“登录”菜单时，我想打开React引导模式弹出窗口：

导出默认类导航扩展组件
{
render（）{
返回(
**登录**
注册
);
}
}

您没有明确说明代码中包含哪些模态组件，因此下面是完整的解决方案：

您需要一个单独的组件来呈现引导模式。守则是：

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>
  );
}

---

你的房间在哪里？它在另一个组件中吗？你能为模式添加代码吗？是的，在另一个名为loginpop.js的文件中，我从这里复制并粘贴了代码

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>
  );
}

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

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