Реагировать выпадающее значение

Question

Я собираюсь получить несколько значений из API с помощью компонента Dropdown.

Вот примеры кода:

<GridContainer>
   <GridItem xs={12} sm={2}>
      <FormLabel className={classes.labelHorizontal}>Package</FormLabel>
   </GridItem>

   <GridItem xs={12} sm={4}>
      <FormControl fullWidth className={classes.selectFormControl}>

       <InputLabel htmlFor="simple-select" className={classes.selectLabel}>
           Please Choose
       </InputLabel>

       <Select
         MenuProps={{
           className: classes.selectMenu
          }}
           classes={{
             select: classes.select
            }}
         inputProps={{
        value: state.memberLoginInformation.package,
        onChange: event => {
          const { memberLoginInformation } = state;
           setState({
            ...state,
           memberLoginInformation: {
           ...memberLoginInformation,
           package: event.target.value
            }
          });
        }
        >
         {
            packageList.data &&
            packageList.data.package.content.map(({ id, name, active, price }) => {

            if (active)
            {
               return (
                    <MenuItem
                        classes={{
                          root: classes.selectMenuItem,
                          selected: classes.selectMenuItemSelected
                        }}
                          value={id}
                    >
                          {name}
                    </MenuItem>
                );
            }
            })
        }
     </Select>
     </FormControl>
   </GridItem>

В моем API есть что-то как это:

{
  "id": 1,
  "name": "Premium",
  "price": 100,
  "point": 100,
  "term": 2,
  "active": true,
  "supplementRenewal": null,
  "termUnit": "YEAR"
}

Теперь моя цель, как я могу получить значения (имя, цена и точка), когда компонент выбран.

Любой здесь может помочь мне, потому что Я могу получить только одно значение.

Спасибо !!!

Answer 1

вы сохраняете значение id в атрибуте 'value', используя

value={id} 

. Вы можете попробовать добавить другие атрибуты и сохранить значения (имя, цена и точка), например, так:

<MenuItem
                        classes={{
                          root: classes.selectMenuItem,
                          selected: classes.selectMenuItemSelected
                        }}
                           valueID={id}
                           valueName={name}
                           valuePrice={price}
                           valuePoint={point}
                    >
                          {name}
                    </MenuItem>