Javascript 反应材料UI完全覆盖popover

我当前正在应用程序中使用Select组件

我构建了一个自定义的模态组件，我希望在单击select时启动该组件，而不是启动列表项。是否有方法覆盖处理程序，以便单击组件的所有部分（如图标、文本字段和下拉箭头），以启动my modal？我只想从本质上考虑这个组件的样式，并覆盖onChange和MenuItem内容

---

为了使在使用选项的替代显示时利用Select更有意义，必须为其提供所有允许值的菜单项，因为所选项目的显示基于查找当前值的匹配菜单项，尽管也可以为Select提供一个带有动态值和文本匹配的菜单项，无论当前所选值是什么

您可以使用一种受控的方法来管理Select的打开状态，因为关闭应该始终由您自定义的选项显示触发，所以可以使用open和onOpen道具来忽略onClose。这样，您就不用试图覆盖导致选择打开的不同事件，而是让它通过onOpen道具告诉您应该在什么时候打开选择，而不用打开选择，而是将其open道具保持为false，只打开自定义弹出窗口

下面是一个工作示例：

import React from "react";
import InputAdornment from "@material-ui/core/InputAdornment";
import Button from "@material-ui/core/Button";
import DateRangeIcon from "@material-ui/icons/DateRange";
import Popover from "@material-ui/core/Popover";
import Box from "@material-ui/core/Box";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";

export default function SimplePopover() {
  const [value, setValue] = React.useState(1);
  const [open, setOpen] = React.useState(false);
  const selectRef = React.useRef();

  const handleSelection = newValue => {
    setValue(newValue);
    setOpen(false);
  };

  return (
    <Box m={2}>
      <Select
        ref={selectRef}
        value={value}
        onChange={e => setValue(e.target.value)}
        displayEmpty
        open={false}
        onOpen={() => setOpen(true)}
        startAdornment={
          <InputAdornment position="start">
            <DateRangeIcon />
          </InputAdornment>
        }
      >
        <MenuItem value={1}>Last Hour</MenuItem>
        <MenuItem value={24}>Last Day</MenuItem>
        <MenuItem value={24 * 7}>Last Week</MenuItem>
        <MenuItem value={24 * 31}>Last Month</MenuItem>
        <MenuItem value={""}>All</MenuItem>
      </Select>
      <Popover
        id="simple-popover"
        open={open}
        anchorEl={selectRef.current}
        onClose={() => handleSelection(value)}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left"
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "left"
        }}
      >
        <Button onClick={() => handleSelection(1)}>Last Hour</Button>
        <Button onClick={() => handleSelection(24)}>Last Day</Button>
      </Popover>
    </Box>
  );
}

下面是第二个示例，它为选定的值使用单个动态菜单项，而不是一组全面的菜单项：

import React from "react";
import InputAdornment from "@material-ui/core/InputAdornment";
import Button from "@material-ui/core/Button";
import DateRangeIcon from "@material-ui/icons/DateRange";
import Popover from "@material-ui/core/Popover";
import Box from "@material-ui/core/Box";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";

export default function SimplePopover() {
  const [value, setValue] = React.useState(1);
  const [text, setText] = React.useState("Last Hour");
  const [open, setOpen] = React.useState(false);
  const selectRef = React.useRef();

  const handleSelection = (newValue, newText) => {
    setValue(newValue);
    setText(newText);
    setOpen(false);
  };

  return (
    <Box m={2}>
      <Select
        ref={selectRef}
        value={value}
        onChange={e => setValue(e.target.value)}
        displayEmpty
        open={false}
        onOpen={() => setOpen(true)}
        startAdornment={
          <InputAdornment position="start">
            <DateRangeIcon />
          </InputAdornment>
        }
      >
        <MenuItem value={value}>{text}</MenuItem>
      </Select>
      <Popover
        id="simple-popover"
        open={open}
        anchorEl={selectRef.current}
        onClose={() => handleSelection(value)}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left"
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "left"
        }}
      >
        <Button onClick={() => handleSelection(1, "Last Hour")}>
          Last Hour
        </Button>
        <Button onClick={() => handleSelection(24, "Last Day")}>
          Last Day
        </Button>
      </Popover>
    </Box>
  );
}

---

你可以把Select封装在一个外部组件中，比如div，它有一个onClick函数，可以打开模态。这和我想要的不太一样。使用按钮非常简单，因为它有onClick道具。我希望选择组件有类似的行为。@mvd我已经修改了我的答案，使之更符合您的要求。只要您的自定义显示被限制为菜单项提供的相同值，我就可以看出使用Select仍然有意义。

import React from "react";
import InputAdornment from "@material-ui/core/InputAdornment";
import Button from "@material-ui/core/Button";
import DateRangeIcon from "@material-ui/icons/DateRange";
import Popover from "@material-ui/core/Popover";
import Box from "@material-ui/core/Box";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";

export default function SimplePopover() {
  const [value, setValue] = React.useState(1);
  const [text, setText] = React.useState("Last Hour");
  const [open, setOpen] = React.useState(false);
  const selectRef = React.useRef();

  const handleSelection = (newValue, newText) => {
    setValue(newValue);
    setText(newText);
    setOpen(false);
  };

  return (
    <Box m={2}>
      <Select
        ref={selectRef}
        value={value}
        onChange={e => setValue(e.target.value)}
        displayEmpty
        open={false}
        onOpen={() => setOpen(true)}
        startAdornment={
          <InputAdornment position="start">
            <DateRangeIcon />
          </InputAdornment>
        }
      >
        <MenuItem value={value}>{text}</MenuItem>
      </Select>
      <Popover
        id="simple-popover"
        open={open}
        anchorEl={selectRef.current}
        onClose={() => handleSelection(value)}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left"
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "left"
        }}
      >
        <Button onClick={() => handleSelection(1, "Last Hour")}>
          Last Hour
        </Button>
        <Button onClick={() => handleSelection(24, "Last Day")}>
          Last Day
        </Button>
      </Popover>
    </Box>
  );
}