React Dropdown Value

Question

我的意图是通过使用Dropdown组件从API获取多个值。

这是我的代码示例：

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