如何使用 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，你可以创建一个 reducer 来查看 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>

希望能帮到你

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

How can I open a modal from a navbar with react-bootstrap?

reactjs

react-bootstrap

redux