Question

enter image description here

class Navigation extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOpen: false };
  }

  handleOpen = () => {
    this.setState({ isOpen: true });
  };

  handleClose = () => {
    this.setState({ isOpen: false });
  };

  render() {
    return (
      <div className={s.root} role="navigation">
        <Navbar className={s.menuBar}>
          <Nav>
            <NavDropdown
              title="Auction"
              id="basic-nav-dropdown"
              onMouseEnter={this.handleOpen}
              onMouseLeave={this.handleClose}
              open={this.state.isOpen}
              noCaret
            >

如您所见，我在NavDropdown中设置了开放道具。但此时，我在屏幕显示时遇到了错误如果有人这样做过，请告诉我

Answer 1

如果你正在改变状态（而你是），请使用defaultOpen而不是open。如果没有，open是要求函数，也许尝试传递你的处理程序而不是状态（我不认为它是最好的解决方案，因为你用onMouseLeave / Enter处理open事件）

使用defaultOpen

class Navigation extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOpen: false };
  }

  handleOpen = () => {
    this.setState({ isOpen: true });
  };

  handleClose = () => {
    this.setState({ isOpen: false });
  };

  render() {
    return (
      <div className={s.root} role="navigation">
        <Navbar className={s.menuBar}>
          <Nav>
            <NavDropdown
              title="Auction"
              id="basic-nav-dropdown"
              onMouseEnter={this.handleOpen}
              onMouseLeave={this.handleClose}
              defaultOpen={this.state.isOpen}
              noCaret
            >

修改

尝试这个hack以查看它是否有效

class Navigation extends React.Component { constructor(props) { super(props); this.state = { isOpen: false }; } handleOpen = () => { this.setState({ isOpen: true }); }; handleClose = () => { this.setState({ isOpen: false }); }; render() { return ( <div className={s.root} role="navigation"> <Navbar className={s.menuBar}> <Nav> <div onMouseEnter={this.handleOpen} onMouseLeave={this.handleClose} > <NavDropdown title="Auction" id="basic-nav-dropdown" defaultOpen={this.state.isOpen} noCaret > </div>

如果需要，可以使用span而不是div

当鼠标悬停时，navdropdown在React中出错

1 个答案: