web-dev-qa-db-ja.com

マウスをホバーしたときにreact-bootstrapのドロップダウンを開くにはどうすればよいですか？

質問は簡単です。クリックではなくマウスを置いたときにドロップダウンを開く必要があります。

現在、私のコードは次のとおりです。

    <Nav>
      <NavDropdown
        onMouseEnter = {()=> isOpen=true}
        open={isOpen}
        noCaret
        id="language-switcher-container"
      >
        <MenuItem>Only one Item</MenuItem>
      </NavDropdown>
    </Nav>

ご覧のとおり、onMouseEnterを試しましたが効果はありません。誰かがこの問題を解決できますか？これを実現するには、どの属性を渡す必要がありますか。

APIページはこちら react-bootstrap APIページ

javascriptcsstwitter-bootstrapreactjsweb
12
W.Chen

ここではるかにクリーンな純粋なCSSソリューション：

.dropdown:hover .dropdown-menu { display: block; }

11
Gary Vernon Grubb
export class Nav extends React.Component {

  constructor(props) {
    super(props)
    this.state = { isOpen: false }
  }

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

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

  render() {
    return (
       <Nav>
        <NavDropdown
          onMouseEnter = { this.handleOpen }
          onMouseLeave = { this.handleClose }
          open={ this.state.isOpen }
          noCaret
          id="language-switcher-container"
        >
          <MenuItem>Only one Item</MenuItem>
        </NavDropdown>
      </Nav>
    )
  }
}

これで問題が解決することを願っています。

9
Rei Dien

これはハッキーなソリューションのようですが、更新後にアプリを実行し続ける最も簡単な方法でした。

最新のアップデートでdropdown-menuは、ボタンがクリックされるまでレンダリングされません。

私はこれを私のcssで使用しています：

.dropdown:hover .dropdown-menu {
    display: block;
}

これを私のコンポーネントに追加しました

  componentDidMount() {
    // TODO: Fix so menu renders automatically w/out click
    const hiddenNavToggle = document.getElementById('navbar__hamburger_wrapper-hidden_click')
    hiddenNavToggle.click()
    hiddenNavToggle.click()
  }

このためにクリックするだけで、指定されたIDのラッピングdivを追加しました。

別の解決策を聞きたいです。

0
Schalton

@Rei Dienの答えに基づく

   onMouseEnter = { this.handleOpen.bind(this) }
   onMouseLeave = { this.handleClose.bind(this) }
0
Ye Cai