时间戳

首页 > 解决方案 > 当鼠标悬停时，navdropdown 在 React 中出现错误

reactjs - 当鼠标悬停时，navdropdown 在 React 中出现错误

问题描述

在此处输入图像描述

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 中设置了 open prop。但是此时，我遇到了屏幕显示的错误如果有人曾经这样做过，请告诉我

标签： reactjshovermousenav

解决方案

如果您正在改变状态（并且您是），请使用defaultOpen而不是。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
            >

编辑

试试这个 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>

如果需要，您可以使用跨度而不是 div

推荐阅读