reactjs - React onClick 不适用于列表项

Question

我有一个带有列表项的下拉菜单，我正在使用包“react-onclickoutside”来检测组件外部的点击，即当有人点击组件外部时下拉关闭它，我面临的问题是我的“onClick”是当我点击它们时不处理 li 标签。

这是下面的代码供审查。

import React from "react";
import { useState, useEffect } from "react";
import onClickOutside from "react-onclickoutside";

const TripTypeDropdown = (props) => {
  const [values, setValues] = useState([
    { tripType: "One Way", value: 1 },
    { tripType: "Return", value: 2 },
    { tripType: "Multi- City", value: 3 },
  ]);
  const [selectedItem, setSelectedItem] = useState({
    tripType: "One Way",
    value: 1,
  });
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => {
    console.log("toggle");
    setIsOpen(!isOpen);
  };
  TripTypeDropdown.handleClickOutside = () => setIsOpen(false);

  const selectItemFromList = (index) => {
    console.log("select kiya");
    const itemSelected = values[index];
    console.log(itemSelected);
    setSelectedItem(itemSelected);
  };
  const getActiveClassName = (item) => {
    if (selectedItem) {
      if (item.tripType == selectedItem.tripType) return "active";
      else return "";
    }
  };
  return (
    <React.Fragment>
      {console.log(selectedItem)}
      <div className="custm-dropdown" onClick={toggle}>
        {selectedItem.tripType}
        <span className="dropdown-icon">
          <img
            src={require("../../../style/images/flight/grey-light-dropdowns.svg")}
            alt="Aertrip"
          />
        </span>
      </div>
      {isOpen ? (
        <div className={`dropdown-modal sm-modal ripple`}>
          <ul>
            {values.map((item, index) => (
              <li
                className={getActiveClassName(item)}
                onClick={() => console.log("clicked")} ///this doesnt gets consoled in my browser , nor does any function runs
                key={index}
              >
                {item.tripType}
              </li>
            ))}
          </ul>
        </div>
      ) : null}
    </React.Fragment>
  );
};

const clickOutsideConfig = {
  handleClickOutside: () => TripTypeDropdown.handleClickOutside,

};
export default onClickOutside(TripTypeDropdown, clickOutsideConfig);

标签： reactjs