Question

目前，我有nav

  <Nav pullRight className="navright">
    <NavItem href="#" className={this.state.signedIn ? '' : 'hidden'}>{this.state.name}</NavItem>
    <NavItem eventKey={2} href="#" className={this.state.signedIn ? 'hidden' : ''}>Login</NavItem>
    <NavItem eventKey={1} href="#" className={this.state.signedIn ? 'hidden' : ''}>Sign Up</NavItem>
  </Nav>

我不知道eventKey是什么或是否需要。但是当我点击其中任何一个时，我想打开我的模态（称为AuthModal）。我想打开AuthModal传递'login'或'signup'

的属性

如何做到这一点？如果重要，我正在使用redux。

Answer 1

如果查看代码，eventKey仅用于警报。所以你提醒号码传递;）

function handleSelect(selectedKey) {
  alert('selected ' + selectedKey);
}

const navInstance = (
  <Nav bsStyle="pills" activeKey={1} onSelect={handleSelect}>
    <NavItem eventKey={1} href="/home">NavItem 1 content</NavItem>
    <NavItem eventKey={2} title="Item">NavItem 2 content</NavItem>
    <NavItem eventKey={3} disabled>NavItem 3 content</NavItem>
  </Nav>
);

如果你想打开模态，请查看模态代码。

getInitialState() { // This is the old way but can work
    return { showModal: false };
  },

constructor() { // New way
  super();
  this.state = {
    showModal: false
  }
}   



  close() {
    this.setState({ showModal: false });
  },

  open() {
    this.setState({ showModal: true });
  },

您的模态需要此代码<Modal show={this.state.showModal} onHide={this.close}>

所以在这里你只需要调用open函数和close来关闭它。所有人都在做出反应。

如果你使用redux，你可以制作一个看看toggleModal是否为false的reducer。通过操作，您可以将其分配给true。

这是您自己的问题的版本

class NavInstance extends React.Component {
  constructor() {
    super();
    this.state = {
      showModal: false
    }
  }

  handleToggleModal() {
    this.setState(
      showModal: !this.state.showModal
    )
  }

  render() {
    return (
      <div>
        <Nav bsStyle="pills">
          <NavItem href="/home">NavItem 1 content</NavItem>
          <NavItem title="Item">NavItem 2 content</NavItem>
          <NavItem disabled>NavItem 3 content</NavItem>
          <NavItem onClick={() => this.handleToggleModal()}>Show Modal</NavItem>
        </Nav>
        <MyModal show={this.state.showModal} />
      </div>
    )
  }
}

const MyModal = ({ show }) => 
  <Modal show>
    My Modal
  </Modal>

希望可以提供帮助

如何使用react-bootstrap从导航栏打开模态？

1 个答案: