Material-UI 选择 e.target.value 未定义

IT技术 reactjs material-ui
2021-04-28 16:27:59

我在我的 React 项目之一中使用 Material-UI 的 Select 组件。我需要按组显示下拉数据，因此我使用了<MenuItem>环绕<ListSubheader>. 我很难获得我的MenuItems的value。如果我的代码有任何明显错误，请告诉我。

<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>
2个回答

e.target.value正如其他人所提到的，返回 undefined的原因是因为它MenuItem不是Select. 由于productList是动态设置到下拉列表中，因此必须以这种方式呈现：

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

我没有将 myListSubheader和包装MenuItem在一个无法div读取 的标签中target.value，而是返回了一个数组。

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

Material-ui 选择直接子项必须是MenuItem：

⚠️当 native 为 false 时，MenuItem 元素必须是直接后代。

您需要相应地更改代码，因此MenuItem是Select. 就像是：

<MenuItem key={i} value={p[0]}>
    <ListSubheader key={i}>{p[0]}</ListSubheader>
    {items}
</MenuItem>

它可能看起来不同，但e.target.value现在不会是未定义的。

其它你可能感兴趣的问题
上一篇从 puppeteer 登录后如何为主页运行灯塔 下一篇计算器显示的正则表达式