英文:
React MUI select not working when I wrap menu item with Tooltip
问题
我的代码看起来像这样。
return (
<FormControl sx={{ m: 1, minWidth: 80 }}>
<InputLabel id="demo-simple-select-autowidth-label">年龄</InputLabel>
<Select
labelId="demo-simple-select-autowidth-label"
id="demo-simple-select-autowidth"
value={age}
onChange={handleChange}
autoWidth
label="年龄"
>
<MenuItem value="">
<em>无</em>
</MenuItem>
<Tooltip describeChild title="二十">
<MenuItem value={10}>二十</MenuItem>
</Tooltip>
<MenuItem value={21}>二十一</MenuItem>
<MenuItem value={22}>二十一点五</MenuItem>
</Select>
</FormControl>
)
每当我点击菜单项时，什么都不会发生，这意味着选择项不会被更新。
英文:
My code looks something like this.
return(
<FormControl sx={{ m: 1, minWidth: 80 }}>
<InputLabel id="demo-simple-select-autowidth-label">Age</InputLabel>
<Select
labelId="demo-simple-select-autowidth-label"
id="demo-simple-select-autowidth"
value={age}
onChange={handleChange}
autoWidth
label="Age"
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<Tooltip describeChild title="Tewnty">
<MenuItem value={10}>Twenty</MenuItem>
</Tooltip>
<MenuItem value={21}>Twenty one</MenuItem>
<MenuItem value={22}>Twenty one and a half</MenuItem>
</Select>
</FormControl>
)
Whenever i click on menu item nothing happens means select item does not gets updated.
答案1
得分: 1
将 Tooltip 放到 MenuItem 内部，并在其中添加 div 标签，因为 tooltip 需要一个子元素。
<MenuItem value={10}>
<Tooltip title="Twenty">
<div>Twenty</div>
</Tooltip>
</MenuItem>
英文:
Move Tooltip inside MenuItem and add div tag as tooltip expects child element
<MenuItem value={10}>
<Tooltip title="Twenty">
<div>Twenty</div>
</Tooltip>
</MenuItem>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论