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

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

Answer 1

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

默认开启

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

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

when mouse hover, navdropdown is getting error in React

mouse

hover

nav

reactjs