reactjs - Materail UI x React：当项目尝试显示 Popover 时自动完成关闭

问题描述

我正在尝试自定义自动完成功能，当您将鼠标指针悬停时，每个项目都有一个更多图标。

当您单击该图标时，它应该会弹出 Popover，但它会关闭自动完成列表。

上图中，我将指针悬停在图标上，当我单击它时，它关闭了列表。

应用程序.js

import React, { useState } from "react";
import { TextField, Paper } from "@material-ui/core";
import { Autocomplete, useAutocomplete } from "@material-ui/lab";
import Item from "./Item";

const App = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [anchorEl, setAnchorEl] = useState(null);

  const countries = [
    { code: "US", label: "USA", phone: "1" },
    { code: "HU", label: "Hungary ", phone: "2" },
    { code: "IT", label: "Italy ", phone: "3" }
  ];

  const openMultipleOptionSearch = (event) => {
    setIsOpen(true);
    setAnchorEl(event.currentTarget);
  };

  const {
    getRootProps,
    getInputLabelProps,
    getInputProps,
    getListboxProps,
    getOptionProps,
    groupedOptions
  } = useAutocomplete({
    id: "use-autocomplete-demo",
    options: countries,
    getOptionLabel: (option) => option.label,
    disableCloseOnSelect: true
  });

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <Paper>
        {groupedOptions.length > 0 &&
          groupedOptions.map((option, index) => (
            <Item key={index} text={option.label} onClose={() => {}} />
          ))}
        {groupedOptions.length === 0 && <p>No match.</p>}
      </Paper>
    </div>
  );
};

export default App;

项目.js

import React, { useState } from "react";
import MoreHoriz from "@material-ui/icons/MoreHoriz";
import { Box, Typography, Button } from "@material-ui/core";
import Popup from "./Popup";

const Item = (prop) => {
  const [onMouseOver, setOnMouseOver] = useState(false);
  const [isOpen, setIsOpen] = useState(false);
  const [anchorEl, setAnchorEl] = useState(null);

  const openDeleteItem = (event) => {
    setAnchorEl(event.currentTarget);
    setIsOpen(true);
  };

  const closeDeleteItem = () => {
    setAnchorEl(null);
    setIsOpen(false);
    setOnMouseOver(false);
    prop.onClose();
  };

  return (
    <Box
      onMouseOver={() => setOnMouseOver(true)}
      onMouseOut={() => isOpen || setOnMouseOver(false)}
    >
      <div className="item-container">
        <Typography variant="body1">{prop.text}</Typography>
      </div>
      <Button
        style={{ display: onMouseOver ? "" : "none" }}
        onClick={openDeleteItem}
      >
        <MoreHoriz />
      </Button>
      <Popup
        isOpen={isOpen}
        anchorEl={anchorEl}
        onClose={() => closeDeleteItem()}
      />
    </Box>
  );
};

export default Item;

Popup.js

import React from 'react';
import { Popover } from '@material-ui/core';

const Popup = (prop) => {
  return (
    <Popover
      id={prop.isOpen ? 'simple-popover' : undefined}
      open={prop.isOpen}
      anchorEl={prop.anchorEl}
      onClose={() => prop.onClose()}
    >
      Popup content
    </Popover>
  );
};


export default Popup;

有谁知道如何解决这一问题？

标签： reactjsmaterial-ui

reactjs - Materail UI x React：当项目尝试显示 Popover 时自动完成关闭

问题描述

解决方案

推荐阅读