Material-UI Select e.target.value未定义 [英] Material-UI Select e.target.value is undefined

问题描述

我在我的React项目之一中使用Material-UI的Select组件.我要求下拉数据以组的形式显示，因此我正在使用< MenuItem> 包裹在< ListSubheader> 周围.我很难获得我的 MenuItem s的价值.如果我的代码有任何公然错误，请告诉我.

I'm using Material-UI's Select component in one of my React projects. I require the dropdown data to be shown in groups, hence I'm using <MenuItem> wrapped around <ListSubheader>. I'm having a hard time getting the value of my MenuItems. Please let me know if there's anything blatantly wrong with my code.

<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 返回未定义的原因是因为 MenuItem 不是 Select 的直接子代.由于 productList 是动态设置在下拉菜单中的，因此必须采用以下方式呈现:

The reason e.target.value was returning undefined was, as others mentioned, due to the fact that MenuItem wasn't a direct child of Select. Since productList is dynamically being set into the dropdown, it has to be rendered in such a way:

ListSubheader0
   Item0
   Item1
ListSubheader1
   Item2
   Item3
   Item4
   ...
...

不是将我的 ListSubheader 和 MenuItem 包裹在 div 标记中，而无法读取 target.value ，我返回了一个数组.

Instead of wrapping my ListSubheader and MenuItem in a div tag where reading the target.value was impossible, I returned an array.

return [
    <ListSubheader key={i}>
        {p[0]}
    </ListSubheader>, 
    items
];

这篇关于Material-UI Select e.target.value未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！