我正在为我的项目使用 Material UI,并且我有一个这样的 UI
如你所见,它有一个选择,当它打开时,我可以输入搜索与我想要的匹配的活动,这就是我所做的:
<FormControl className={classes.formControl} color="secondary">
<Select
value={campaign}
displayEmpty
className={classes.selectEmpty}
onChange={(e) => {
if (e.target.value === '') {
e.preventDefault();
return false;
} else setCampaign(e.target.value);
}}
onClose={(e) => {
if (e.target.value === '') {
e.preventDefault();
return false;
}
}}
inputProps={{'aria-label': 'Without label'}}
>
<MenuItem value="" className={classes.campaignSeachBox}>
<div className={classes.campaignSeachBoxHeader}>
<img
src={darkSignalTowerIcon}
className={classes.customedIcon}
alt=""
/>
<span className={classes.customedText}>New Campaign</span>
</div>
<div className={classes.campaignSeachBoxInputContainer}>
<SearchIcon fontSize="small" color="disabled" />
<input
type="text"
className={classes.campaignSeachBoxInput}
placeholder="Search"
/>
</div>
</MenuItem>
{['Metro_1125_Geo', 'DMA_1125_Geo', 'Other_1125_Geo'].map(
(each, index) => (
<MenuItem
value={each}
key={index}
className={classes.customedText}
>
{each}
</MenuItem>
)
)}
</Select>
<FormHelperText>Updated 6 days ago</FormHelperText>
</FormControl>
如你所见,我把输入放在MenuItem
的{{1}}之一,我设置输入的值为空字符串,当它被选中时,它将是阻止关闭 Select
但它没有解决
请告诉我如何处理,非常感谢,祝您有美好的一天