我在我的 React 项目之一中使用 Material-UI 的 Select 组件。我需要按组显示下拉数据,因此我使用 <MenuItem>
缠绕<ListSubheader>
.我很难获得我的 MenuItem
的值(value)s。如果我的代码有任何明显错误,请告诉我。
<FormControl>
<InputLabel>Product type</InputLabel>
<Select
id="product-type"
input={<Input id="grouped-select" />}
value={this.state.productType}
autoWidth={true}
style={{ width: 200 }}
onChange={(e, child) => {
console.log(e.target.value); // undefined!
}}
>
{this.state.productList.map((p, i) => {
const list = p[1];
let items = list.map((e, j) => {
return (
<MenuItem key={j} value={e.name}>
{e.name}
</MenuItem>
);
});
return (
<div>
<ListSubheader key={i}>{p[0]}</ListSubheader>
{items}
</div>
);
})}
</Select>
</FormControl>
最佳答案
原因e.target.value
正如其他人所说,返回 undefined 是由于 MenuItem
不是 Select
的直系 child .自 productList
动态设置到下拉列表中,它必须以这种方式呈现:
ListSubheader0
Item0
Item1
ListSubheader1
Item2
Item3
Item4
...
...
而不是包裹我的
ListSubheader
和 MenuItem
在 div
标签在哪里阅读target.value
不可能,我返回了一个数组。return [
<ListSubheader key={i}>
{p[0]}
</ListSubheader>,
items
];
关于reactjs - Material-UI 选择 e.target.value 未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58929085/