使用ReactJS选择单个下拉菜单时获取多个值

Question

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

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

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

Answer 1

您可以使用id、price和term这三个值作为对象，并将其传递给选项的值道具

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>