材質 UI 菜單組件中的 onChange

Question

感謝您來到這里！ 我的問題與如何在 Material UI Menu 組件中創建“onChange”屬性有關。 當我使用Select組件的“onChange”屬性時，我可以在用戶單擊它后輕松更改我的 state。 我想創建一個類似的效果，但然后使用菜單而不是 Select 組件。 請注意，我在鈎子內使用了 function，這可能會使事情復雜化。

下面我可以向您展示我的代碼外觀的示例：

const [sortingMethod, setSortingMethod] = useState(() => sortHighestSummerTemp);

const onSortMethod = (e) => {
  setSortingMethod(e.target.value);
};

<FormControl>
  <InputLabel shrink>Sort By </InputLabel>{' '}
  <Select defaultValue="" onChange={onSortMethod}>
    <MenuItem value={() => sortHighestSummerTemp}>☀️ Hottest summers</MenuItem>
    <MenuItem value={() => sortLowestWinterTemp}>🥶 Coldest winters</MenuItem>
    <MenuItem value={() => sortMostHotDays}>🥵 Most hot days</MenuItem>
  </Select>
</FormControl>;

那是我的 select 組件正在運行，它正在工作。 這是相同的菜單，我不知道如何實現“onChange”：

<FormControl className={classes.formControl}>
  <PopupState variant="popover" popupId="demo-popup-menu">
    {(popupState) => (
      <React.Fragment>
        <Button
          variant="contained"
          color="primary"
          startIcon={<SortIcon />}
          {...bindTrigger(popupState)}
        >
          Sort by
        </Button>
        <Menu
          value=""
          // onChange={onSortMethod} <-- How to do this? ⚠
          {...bindMenu(popupState)}
        >
          <MenuItem
            onClick={popupState.close}
            value={() => sortHighestSummerTemp}
          >
            ☀️ Hottest summers
          </MenuItem>
          <MenuItem
            onClick={popupState.close}
            value={() => sortLowestWinterTemp}
          >
            🥶 Coldest winters
          </MenuItem>
          <MenuItem onClick={popupState.close} value={() => sortMostHotDays}>
            🥵 Most hot days
          </MenuItem>
        </Menu>
      </React.Fragment>
    )}
  </PopupState>
</FormControl>;

如果您能解釋如何使用 Menu 組件實現類似的效果，我會很幸運！

感謝您的閱讀。

Answer 1

我認為您應該按照 MenuItem 執行此操作（在 onClick 屬性中）。 菜單本身沒有那種屬性： Material-UI page

其次，我不喜歡 function 的價值。 我認為您可以將變量（ sortHighestSummerTemp或sortLowestWinterTemp ）傳遞給 state。 反應頁面參考