Question

我在下面粘贴我的代码，请指导我如何单击退出列表中的链接。

let showWomenCategoryMenuDropout = false;
class WomenCategoryMenu extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      showWomenCategoryMenuDropout: false
    };

    this.openWomenCategoryMenuDropout = this.openWomenCategoryMenuDropout.bind(
      this
    );
    this.closeWomenCategoryMenuDropout = this.closeWomenCategoryMenuDropout.bind(
      this
    );
  }

  openWomenCategoryMenuDropout() {
    this.setState({
      showWomenCategoryMenuDropout: true
    });
  }

  closeWomenCategoryMenuDropout() {
    this.setState({
      showWomenCategoryMenuDropout: false
    });
  }

  render() {
    return (
      <div>
        <div
          className={classnames(style.header_category_menu_container)}
          onMouseOut={this.closeWomenCategoryMenuDropout}
          onMouseEnter={this.openWomenCategoryMenuDropout}>
          <span><a href="">Women</a></span>
        </div>
        <div>
          <SignIn
            type="dropout"
            open={this.state.showWomenCategoryMenuDropout}
            onMouseOut={this.closeWomenCategoryMenuDropout}
            onMouseEnter={this.openWomenCategoryMenuDropout}>
            <div className={classnames(style.cartegory_wrapper)}>
              <CategoryGrid>
                {data.map((ele, index) => (
                  <div
                    className={classnames(style.cartegory_menu)}
                    key={"Key-" + index}>
                    <h3 className={classnames(style.cartegory_menu_title)}>
                      {ele.categorytitle}
                    </h3>
                    <ul>
                      {Array.isArray(ele.category) &&
                        ele.category.map((d, i) => (
                          <li key={"Key-" + i}>{d[`Category${i + 1}`]}</li>
                        ))}
                      {ele.imagePath && <img src={ele.imagePath} />}
                    </ul>
                  </div>
                ))}
              </CategoryGrid>
            </div>
          </SignIn>
        </div>
      </div>
    );
  }
}

也请在下面找到JASON数据...

var data = [
  {
    categorytitle: "Shoes",
    category: [
      {
        Category1: "Boots"
      },
      {
        Category2: "Sneakers"
      },
      {
        Category3: "Flats"
      },
      {
        Category4: "Booties"
      },
      {
        Category5: "Mules"
      },
      {
        Category6: "Heels/Pumps"
      },
      {
        Category7: "Clogs"
      },
      {
        Category8: "Slippers"
      },
      {
        Category9: "Sandals"
      },
      {
        Category10: "Sale"
      },
      {
        Category11: "Shop All"
      }
    ]
  },
  {
    categorytitle: "Activities",
    category: [
      {
        Category1: "Comfort Shop"
      },
      {
        Category2: "Run Shop"
      },
      {
        Category3: "Trend Guide"
      },
      {
        Category4: "Athletic"
      },
      {
        Category5: "Casual"
      },
      {
        Category6: "Dress"
      },
      {
        Category7: "Outdoor"
      },
      {
        Category8: "Walking"
      },
      {
        Category9: "Foot Health & Wellness"
      },
      {
        Category10: "Narrow Shoes"
      },
      {
        Category11: "Wide Shoes"
      }
    ]
  },
  {
    categorytitle: "Clothing & More",
    category: [
      {
        Category1: "Handbags/Purses"
      },
      {
        Category2: "Active & Yoga"
      },
      {
        Category3: "Coats & Jackets"
      },
      {
        Category4: "Athletic"
      },
      {
        Category5: "Dresses"
      },
      {
        Category6: "Tops"
      },
      {
        Category7: "Sweaters"
      },
      {
        Category8: "Socks"
      },
      {
        Category9: "Sunglasses"
      },
      {
        Category10: "Rain Gear"
      },
      {
        Category11: "Wide Shoes"
      }
    ]
  },
  {
    categorytitle: "Top Brands",
    category: [
      {
        Category1: "Sam Edelman"
      },
      {
        Category2: "Clarks"
      },
      {
        Category3: "Dr Martens"
      },
      {
        Category4: "Lucky Brand"
      },
      {
        Category5: "New Balance"
      },
      {
        Category6: "Skechers"
      },
      {
        Category7: "Sperry Top-Sider"
      },
      {
        Category8: "Sorel"
      },
      {
        Category9: "TOMS"
      },
      {
        Category10: "UGG"
      },
      {
        Category11: "Vionic"
      }
    ]
  },
  {
    targetUrl: "/",
    imagePath:
      "src/image1",
    title: "WORK SHOP"
  }
];

这是我的JSON数据，在鼠标悬停dropuout正确显示后，但一旦我要单击dropout中的任何链接，dropout本身就会关闭。

Answer 1

此问题已解决。.这里只需将onMouseOut替换为onMouseLeave。

如何处理React JS中的辍学

1 个答案: