javascript - React Material-UI 完全覆盖弹出框

Question

我目前Select在我的应用程序中使用一个组件。

我构建了一个自定义模式组件，我想在单击选择时启动它而不是列表项。有没有办法覆盖组件所有部分的点击处理程序，例如图标、文本字段和下拉箭头以启动我的模式？我想基本上只采用这个组件的样式并覆盖onChangeandMenuItem东西。

<Select
  value={props.selectedValue}
  onChange={props.onTimeChange}
  displayEmpty
  startAdornment={
    <InputAdornment position="start">
      <DateRangeIcon />
    </InputAdornment>
  }
>
  {/* DONT USE THESE MENU ITEMS AND USE CUSTOM MODAL INSTEAD */}
  {/*<MenuItem value={-1} disabled>*/}
  {/*  Start Date*/}
  {/*</MenuItem>*/}
  {/*<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>

标签： javascriptreactjsmaterial-ui

Answer 1

为了使其Select在使用选项的替代显示时有意义，为它提供所有允许值的菜单项很重要，因为所选项目的显示基于查找MenuItem当前的匹配项值（尽管也可以为Select单个MenuItem提供动态值和匹配当前所选值的文本）。

您可以使用“受控”方法来管理使用和道具的open状态（您可以省略，因为关闭应始终由您的自定义选项显示触发）。这样，您无需尝试覆盖导致打开的不同事件，而是让它告诉您何时应该打开（通过道具），而不是打开，保持其道具一如既往，只打开您的自定义弹出窗口.SelectopenonOpenonCloseSelectonOpenSelectopenfalse

这是一个工作示例：

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>
  );
}

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

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>
  );
}