时间戳

首页 > 解决方案 > 使用 ReactJS 选择单个下拉列表时获取多个值

reactjs - 使用 ReactJS 选择单个下拉列表时获取多个值

问题描述

我的目标是在选择下拉列表时检索多个值，例如：id、价格和期限。

现在我可以在单击下拉列表时获得一个值，这是我的示例代码。

const [value, setValue] = React.useState("");

const packageList = [
    {
        id: 1,
        name: "Premium 1 Year",
        price: "100",
        term: 2
    },
    {
        id: 2,
        name: "Premium 2 Year",
        price: "150",
        term: 2
    },
    {
        id: 3,
        name: "Premium 3 Year",
        price: "300",
        term: 2
    }
];

const _onSubmit = React.useCallback(
    () => {
        console.log("value", value);
    }, [value]
)

<FormControl fullWidth className={classes.selectFormControl}>
    <Select
      value={value}
      inputProps={{
      value: value,
      name: "package-option",
      id: "packageOption",
      onChange: event => {
         setValue({
           value: event.target.value
          });
        }
     }}
     >
        {packageList.map(({ id, name }) => {
           return (
             <MenuItem
                classes={{
                  root: classes.selectMenuItem,
                  selected: classes.selectMenuItemSelected
                 }}
                 value={id}
              >
                   {name}
              </MenuItem>
             );
          })}
     </Select>
</FormControl>

<Button color="primary" fullWidth onClick={_onSubmit}>
    Submit
</Button>

我期望的是，每当用户从下拉列表中选择一个选项时，它都会显示如下：

id: 1,
price: "100",
term: 2

标签： reactjsdrop-down-menumaterial-ui

解决方案

您可以使用所有三个值 id、price 和 term 作为对象并将其传递给 option 的 value 属性

const [value, setValue] = React.useState({
   name: 'mango',
   id: 1,
   price: 2000
});

<select value={value.name} onChange={this.handleChange}>
    <option value={{name:'papaya', id:2, price:2500 }}>papaya</option>
    <option value={{name:'lime', id:3, price:1500 }}>Lime</option>
</select>

推荐阅读