如何使用react-bootstrap從導航欄打開模式？

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。 通過執行操作，您可以將其調度為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>

希望能有所幫助