при наведении курсора на navdropdown возникает ошибка в React - PullRequest
Новая
       14

при наведении курсора на navdropdown возникает ошибка в React

0 голосов
/ 10 мая 2018

введите описание изображения здесь 

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.Но в это время я столкнулся с ошибкой, как показано на экране. Если кто-нибудь когда-либо делал это, пожалуйста, дайте мне знать

1 Ответ

0 голосов
/ 10 мая 2018

Используйте defaultOpen вместо open, если вы изменяете состояние (и вы есть). Если нет, open запрашивает функцию, может быть, попробуйте передать свой обработчик вместо состояния (я не думаю, что это лучшее решение, так как вы обрабатываете события open с помощью onMouseLeave / Enter)

По умолчаниюОткрыто 

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
            >

EDIT

Попробуйте этот хак, чтобы увидеть, работает ли он 

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, если хотите

...