React Material-UI полностью переопределяет всплывающее окно

Question

В настоящее время я использую в своем приложении компонент Select.

I built a custom modal component that I want to launch instead of the list items when the select is clicked. Is there a way to override the handler for clicks on all portions of the component, such as icon, text field, and dropdown arrow to launch my modal? I want to take just the styling of this component essentially and override the onChange and MenuItem stuff.

Answer 1

Чтобы иметь смысл использовать Select при использовании альтернативного отображения для параметров, важно, чтобы вы предоставили ему пункты меню для всех разрешенных значений, потому что отображение выбранного элемента основано на поиск совпадения MenuItem для текущего значения (хотя также можно было бы предоставить Select одиночный MenuItem с динамическим c значением и текстом, совпадающим с текущим выбранным значением).

Вы можете использовать «управляемый» подход для управления состоянием open объекта Select с помощью свойств open и onOpen (вы можете не указывать onClose, так как закрытие всегда должно запускаться вашим настраиваемое отображение параметров). Таким образом, вместо того, чтобы пытаться переопределить различные события, которые вызывают открытие Select, вы просто позволяете ему сообщать вам, когда он должен открыться (через опору onOpen), но вместо того, чтобы открывать Select, оставьте его 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>
  );
}

Here's a second example using a single, dynamic MenuItem for the selected value instead of a comprehensive set of menu items:

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 (
    
       
        
        
          
        
               handleSelection (значение)} anchorOrigin = {{vertical: "bottom", horizontal: "left"}} transformOrigin = {{vertical: "top", horizontal: "left"}}> handleSelection (1, "Last Hour")} > Последний час  handleSelection (24, "Последний день")}> Последний день   ); } 

Изменить альтернативный вид параметров для выбора