材质 UI 菜单组件中的 onChange

Question

thanks for being here! My question is related to how I can create an 'onChange' property in the Material UI Menu component . When I am using the 'onChange' property of the Select component, I can easily alter my state after the user clicks on it. I would like to create a similar effect, but then using a Menu instead of a Select component. Note that I am using a function inside a hook, which might complicate things.

Below I could show you how an example of how my code looks:

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

That's my select component in action, which is working. And here is the same Menu, where I don't know how to implement the "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>;

I would be blessed if you could explain how to achieve a similar effect with the Menu component!

Thank you for reading.

Answer 1

I think you should do that per MenuItem (at the onClick property). The Menu itself doesn't have that kind of property: Material-UI page

Secondly, I don't like value as a function. I think you can just pass the variable ( sortHighestSummerTemp or sortLowestWinterTemp ) to a state. React page reference