Как я могу предотвратить материал-UI Выберите параметры, которые будут открыты при нажатии на конкретную область выбранного параметра

Question

У меня есть Select компонент из @material-ui/core/Select, только с одной опцией (для упрощения),
, которую я использую, как показано ниже:

<FormControl>
  <InputLabel id="demo-controlled-open-select-label">Test</InputLabel>
  <Select
    labelId="demo-controlled-open-select-label"
    id="demo-controlled-open-select"
    value={0}
    onChange={e => { console.log({ type: 'on-change', e }) }}
    onClick={e => { console.log({ type: "on-click", e }) }}
    onOpen={e => { console.log({ type: "on-open", e }) }}
  >
    <MenuItem value={0}>
      <div>
        <button onClick={e => { console.log({ type: "open-on-click", e }) }}>
          Open
        </button>
        <button onClick={e => {
          console.log({ type: "do-not-open-on-click", e })
          // Do something
          e.stopPropagation() // Try not to open the options
        }}>
          Do not open
        </button>
      </div>
    </MenuItem>
  </Select>
</FormControl>

Это дает результат ( см. Демонстрационную версию ):

Когда я нажимаю одну из двух кнопок, она открывает опции Select.
У меня вопрос: как мне не открывать опции Select при нажатии на кнопку «Не открывать»?
Моя проблема, кажется, что я не могу поймать щелчок событие о содержимом моего Select компонента.
Следовательно, мой e.stopPropagation() не имеет никакого эффекта.

Мне нужно такое поведение, потому что в моем реальном сценарии использования
Я бы хотел, чтобы вместо моей кнопки «Не открывать» был компонент TextField.

Спасибо за помощь

Answer 1

Сделать <Select /> управляемым будет в порядке

const [open, setOpen] = React.useState(false);

<Select
  value={0}
  onClose={() => {
    setOpen(false);
  }}
  open={open}
>

<MenuItem value={0}>
  <div className="main-option">
    <button
      onClick={() => {setOpen(true)}}
    >
      Open
    </button>
    <button>
      Do not open
    </button>
  </div>
</MenuItem>

Полный код:

import React from "react";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import Select from "@material-ui/core/Select";

export default function ControlledOpenSelect() {
  const [open, setOpen] = React.useState(false);
  return (
    <FormControl>
      <InputLabel id="demo-controlled-open-select-label">Test</InputLabel>
      <Select
        labelId="demo-controlled-open-select-label"
        id="demo-controlled-open-select"
        value={0}
        onOpen={e => {
          console.log({ type: "on-open"});
        }}
        onClose={() => {
          setOpen(false)
        }}
        open={open}
      >
        <MenuItem value={0}>
          <div className="main-option">
            <button
              onClick={e => {
                console.log({ type: "open-on-click"});
                setOpen(true);
              }}
            >
              Open
            </button>
            <button
              onClick={e => {
                console.log({ type: "do-not-open-on-click"});
              }}
            >
              Do not open
            </button>
          </div>
        </MenuItem>
      </Select>
    </FormControl>
  );
}

Попробуйте онлайн: