реагировать навбар изменить его на onmouseover вместо клика - PullRequest
Новая
       75

реагировать навбар изменить его на onmouseover вместо клика

1 голос
/ 29 апреля 2020

Я хотел загрузить подменю реагировать на навигацию при наведении курсора вместо щелчка. https://react-bootstrap.github.io/components/navbar/

import { Nav,NavDropdown,Navbar } from "react-bootstrap";

<Navbar bg="light" expand="lg">
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav>
                        <NavDropdown title="Beneficiary" id="basic-nav-dropdown" className="Dropdown">
                            <NavDropdown.Item  onClick={() => this.recordList('Approved List',this.state.approvedRecords)}>Approved</NavDropdown.Item>
                            <NavDropdown.Divider />
                            <NavDropdown.Item onClick={() => this.recordList('Rejected List',this.state.rejectedRecords)}>Rejected</NavDropdown.Item>
                            <NavDropdown.Divider />
                            <NavDropdown.Item onClick={() => this.recordList('Referred Back List',this.state.refBackRecords)}>Referback</NavDropdown.Item>
                        </NavDropdown>
</Nav>
                    </Navbar.Collapse>
                    </Navbar>

enter image description here

Любая помощь будет оценена.

Ответы [ 2 ]

1 голос
/ 29 апреля 2020

Здесь я играл с ним в течение минуты

, так как я впервые предложил добавить локальное const и функцию для обработки выпадающего списка 

 const [visible, setVisible] = useState(false);

  const handleHover = () => {
    setVisible((prevVisible) => (prevVisible = !prevVisible));
  };

А затем просто 

    <Navbar.Collapse id="basic-navbar-nav" onMouseEnter={handleHover}>
            <Nav>
              <NavDropdown
                title="Beneficiary"
                id="basic-nav-dropdown"
                className="Dropdown"
                show={visible}
              >
...

Как я и подозревал, вам придется обрабатывать и событие отпускания мыши, пока в моей функции 

setVisible((prevVisible) => (prevVisible = !prevVisible));

мы переключаем видимость при вводе мыши, но вы понимаете, суть :) ЛМК, если я могу помочь дальше, или если вы найдете лучшее решение

0 голосов
/ 29 апреля 2020

Ну, согласно их документам, это не может быть сделано "из коробки". Вы можете добавить свою собственную функцию в NavDropdown на Mouseenter. При условии, что вы используете ловушки реагирования, это будет что-то вроде 

const [isDropdownVisible, setDropdownVisible] = useState(false);

const handleHover = () => {
  setDropdownVisible(true)
}

Конечно, вам нужно установить подменю равным visible={isDropdownVisible}, а затем для родителя вы можете просто сказать onmouseenter={handleHover} Возможно, вам также придется обрабатывать onmouseleave, я не уверен. Надеюсь, что это будет ценным ориентиром :) Удачи

...